Hi Robert,
I understand your requirement for disabling equality of selection start and end (resulting in empty range) and setting precise positions of thumbs according to ticks. Good news is that the first is easy to achieve with setting MinimumRangeSpan = 10 in your case. I admit it is a miss in our documentation and I logged it for improvement. However, the next requirement for better thumb positioning requires huge refactoring or several extensible additions to our RadSlider control. Quick note here - you can log a feature request in our feedback portal which we will later approve.
The selection thumbs and the rectangle (range rectangle which you can drag) between the thumbs are located in a horizontal stackpanel. When you drag the thumbs actually the slider's internal code changes the width of a 'invisible' buttons on left and right of the thumbs as well as width of a range rectangle. Here is a brief picture of the slider trakck (increase decrease handle buttons are not included):
Button Thumb Rectangle-Thumb Thumb Button
The code which handles these scenarios is pretty much locatied in the virtual method UpdateTrackLayout:
protected virtual void UpdateTrackLayout()
{
if (this.IsInitializing)
{
return;
}
double range = this.Maximum - this.Minimum;
if (range <= 0)
{
return;
}
double value = .0;
Thickness margin = new Thickness();
double coef = 1.0;
if (this.IsSelectionRangeEnabled)
{
if (!this.IsArranged)
return;
value = this.IsDeferredDraggingEnabled ? this.DeferredSelectionStart : this.SelectionStart;
double selectionStart = value;
double selectionEnd = this.IsDeferredDraggingEnabled ? this.DeferredSelectionEnd : this.SelectionEnd;
if (this.rangeStartThumb != null && this.rangeEndThumb != null && this.rangeMiddleThumb != null)
{
double rangeStartThumbWidth = this.thumbVisibility != System.Windows.Visibility.Collapsed ? this.rangeStartThumb.ActualWidth : 0d;
double rangeEndThumbWidth = this.thumbVisibility != System.Windows.Visibility.Collapsed ? this.rangeStartThumb.ActualWidth : 0d;
coef = this.baseTrackLength / range;
margin = new Thickness(rangeStartThumbWidth, 0, rangeEndThumbWidth, 0);
this.rangeMiddleThumb.Width = Math.Max(0, Math.Round(selectionEnd * coef) - Math.Round(selectionStart * coef));
}
}
else
{
value = this.IsDeferredDraggingEnabled ? this.DeferredValue : this.Value;
if (this.singleThumb != null)
{
var singThumblWidth = this.thumbVisibility != System.Windows.Visibility.Collapsed ? this.singleThumb.ActualWidth : 0d;
coef = this.baseTrackLength / range;
margin = new Thickness(singThumblWidth / 2, 0, singThumblWidth / 2, 0);
}
}
if (this.bottomTickBar != null)
{
this.bottomTickBar.Margin = margin;
}
if (this.topTickBar != null)
{
this.topTickBar.Margin = margin;
}
if (this.largeDecrease != null)
{
if (value == this.Maximum)
{
this.largeDecrease.Width = Math.Max(0, Math.Floor((value - this.Minimum) * coef));
}
else
{
this.largeDecrease.Width = Math.Max(0, Math.Round(value * coef) - Math.Round(this.Minimum * coef));
}
}
}
So if you decide to customize it we can help with getting the internal / private elements in it. Basically they are elements you can get in OnApplyTemplate.
Another option you can consider is somehow minimize the visual offsets this mechanism produces. In the attached project I have defined TickTemplate which uses both normal ticks and labels and also the left thumb has offset to the right and the opposite for the right thumb. I hope this can also be helpful in your scenario.
Regards,
Petar Mladenov
Progress Telerik
Get
quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers.
Learn More.