How to customize slider and buttons

2 posts, 0 answers
  1. thdwlgP
    thdwlgP avatar
    34 posts
    Member since:
    Mar 2009

    Posted 01 Apr 2009 Link to this post

    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?

  2. Tsvetie
    Tsvetie avatar
    1517 posts

    Posted 06 Apr 2009 Link to this post

    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,
    the Telerik team

    Check out Telerik Trainer , the state of the art learning tool for Telerik products.
  3. DevCraft R3 2016 release webinar banner
Back to Top