This is a migrated thread and some comments may be shown as answers.

How to customize slider and buttons

1 Answer 113 Views
Slider
This is a migrated thread and some comments may be shown as answers.
thdwlgP
Top achievements
Rank 1
thdwlgP asked on 01 Apr 2009, 07:29 PM
Is there a way to customize the Decrease, Increase button so I can position them differently and change the size of those buttons?
I want a horizontal slider but I want the Decrease (Previous) and Increase (Next) buttons to be about 50px above the slider.

Is there a way to make the horizontal slider thicker? Or make it look like this?
http://jqueryfordesigners.com/demo/slider-gallery.html

Thanks
J.

1 Answer, 1 is accepted

Sort by
0
Tsvetie
Telerik team
answered on 06 Apr 2009, 11:44 AM
Hello J,
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,
Tsvetie
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.
Tags
Slider
Asked by
thdwlgP
Top achievements
Rank 1
Answers by
Tsvetie
Telerik team
Share this question
or