The RadSlider control has three modes, based on the value of its ItemType property:
- Items - in case you use this mode, you yourself define the number of items in the RadSlider control and the valid values for the slider are in the range [0, (items.count - 1)]. That is why, in case you have only four items, you would be able to release the dragHandle of the RadSlider only on four positions on the track and the dragHandle would "jump" from one item to the other. However, this is expected, as you have defined a RadSlider with only four values.
- Ticks - in this mode, the RadSlider displays ticks for its values. However, those values are numbers and you cannot define a slider with ticks to display text.
- None - the default mode. In this case, the RadSlider can accept all values from the range you have defined [minimumValue, maximumValue].
Basically, you can define a custom skin for the RadSlider that would resemble the one in the example you provided a reference to (I have attached a sample page, demonstrating one). However, you cannot define the four items for the RadSlider and expect to be able to release the dragHandle anywhere on the track.
That is why, in case you what to achieve exactly the same result, I can suggest only one of the following:
- Create a image that would be the background for the track element - the text for the items would be part of the image and use a RadSlider with ItemType=None
- In addition to the slider in the attached page, define an UL element apart from the RadSlider, style it as expected and position it over the track element.
All the best,
the Telerik team
, the state of the art learning tool for Telerik products.