UWP: range selector control

Slider control lets the user to select a value from a range. What about selecting multiple values from a given minimum and maximum?

There is no possibility to tune Slider to work as it depicted above. That’s a case to implement a custom control. Before we start, download an example from here.

Main properties.

The new control is going to have minimum and maximum properties to restrict user input, start and end range to save what the user has selected. Let’s begin from introducing a new class RangeSelector with the required dependency properties:

Style and template.

When RangeSelector is added and inherited from Windows.UI.Xaml.Controls.Control, we can declare the style and template for the control. Any custom control style should be placed in Themes/Generic.xaml file:

Don’t forget to update constructor to apply the defined style when RangeSelector is being created:

The visual part of any control is a template. Slider control templae has two rectangles whith a thumb. A Slider thumb is Border element. The full template easy to get with Blend. A good article about how to do it is here.

My RangeSelector has two thumbs, left and right. I utilize two rectangles to apply selection effect. The first one, I use to visualize a set of available values. And another rectangle, to show a selected range. When the control is loaded, the first rectangle is not visible because the full range is selected. In the template, the both rectangles are placed at the same level of logical tree:

I use clipping to shrink or expand the track. The thumbs have RenderTransform set to TranslateTransform. My intent is to use TranslateTransform.X property to update a thumb position, when the user is dragging a thumb:

Finally, the completed style:

Control.Foreground property is used to highlight a selected range and Control.Background to show space available for dragging.

Handle user input.

Now, lets subscribe on DragStarted and DragCompleted events. The right place to do that is RangeSelector.OnApplyTemplate() method. Inside the method we can get references to the elements we defined in the style and add required events handlers:

LeftThumbDragDelta and RightThumbDragDelta are responsible for updating the horizontal position of the thumbs. There are two corner cases that we need to take care of:

  1. The thumbs can’t intersect;
  2. The thumbs should be steak to bounds of the track rectangle.

To prevent the intersection from the left side, I check if sum of the left thumb position and a horizontal delta is less than the right thumb X coordinate. For the right thumb, I only apply a shift if the right thumb X positioin is greater than the left thumb X position. To keep the both thumbs on the track, it’s enough to compare the sum of the current positoin and a horizontal change with the point (0,0). Less words, more action. The code bellow serves the described cases:

You already noticed that after a thumb position has been updated, there is a call of UpdateTrack() method. The method sets TrackRect clipping. To calculate the width between the thumbs, I transform the both thumbs poistion, subtract the right X from the left X and set the result to the clipping rectangle:

The RangeSelector is ready to use. The source code is available at github. Happy coding!

Leave a Reply