How to Shift the Ticks on an ItemSlider to line up with the slider Text?

[Young]

I have an RadSlider (ItemSlider):

<telerik:RadSlider ID="RadSlider1" runat="server" ItemType="item" Width="325px"
                              Height="45px" AnimationDuration="400" CssClass="ItemSlider"
                              ThumbsInteractionMode="Free" TrackPosition="BottomRight" Value="5" >
                            <Items>
                                <telerik:RadSliderItem Text="1" Value="1"></telerik:RadSliderItem>
                                <telerik:RadSliderItem Text="2" Value="2"></telerik:RadSliderItem>
                                <telerik:RadSliderItem Text="3" Value="3"></telerik:RadSliderItem>
                                <telerik:RadSliderItem Text="4" Value="4"></telerik:RadSliderItem>
                                <telerik:RadSliderItem Text="5" Value="5"></telerik:RadSliderItem>
                                <telerik:RadSliderItem Text="6" Value="6"></telerik:RadSliderItem>
                                <telerik:RadSliderItem Text="7" Value="7"></telerik:RadSliderItem>
                                <telerik:RadSliderItem Text="8" Value="8"></telerik:RadSliderItem>
                                <telerik:RadSliderItem Text="9" Value="9"></telerik:RadSliderItem>
                                <telerik:RadSliderItem Text="10" Value="10"></telerik:RadSliderItem>                                
                            </Items>
</telerik:RadSlider>     

 

How do I shift the "ticks" so that they line up exactly with the "Text"?

 

Requirements: I need the ability to click and have the slide go to my click position.  I also need tick marks that line up with the slider Text.

[Ianko]

Hello,

You should rather use the ItemType="Tick" and configure the MaximumValue, MinimumValue, SmallChange and LargeChange properties.

<telerik:RadSlider ID="RadSlider1" runat="server" ItemType="Tick" Width="325px"
    Height="45px" AnimationDuration="400" CssClass="ItemSlider"
    MaximumValue="10" MinimumValue="1" SmallChange="1" LargeChange="1"
    ThumbsInteractionMode="Free" TrackPosition="BottomRight" Value="5">
    <Items>
        <telerik:RadSliderItem Text="1" Value="1"></telerik:RadSliderItem>
        <telerik:RadSliderItem Text="2" Value="2"></telerik:RadSliderItem>
        <telerik:RadSliderItem Text="3" Value="3"></telerik:RadSliderItem>
        <telerik:RadSliderItem Text="4" Value="4"></telerik:RadSliderItem>
        <telerik:RadSliderItem Text="5" Value="5"></telerik:RadSliderItem>
        <telerik:RadSliderItem Text="6" Value="6"></telerik:RadSliderItem>
        <telerik:RadSliderItem Text="7" Value="7"></telerik:RadSliderItem>
        <telerik:RadSliderItem Text="8" Value="8"></telerik:RadSliderItem>
        <telerik:RadSliderItem Text="9" Value="9"></telerik:RadSliderItem>
        <telerik:RadSliderItem Text="10" Value="10"></telerik:RadSliderItem>
    </Items>
</telerik:RadSlider>

Regards,
Ianko
Telerik

 

 

[Young]

This solution allows the ticks to line up properly which is great.

However, the slider only moves one step at a time when I click the bar. For example, the slider is at 1 and I click the 10 area of the bar.  I want the slider to jump from 1 to 10.  The solution offered prevents the slider from jumping to 10. Rather, it jumps from 1 to 2 when the 10 area of the bar is clicked.

How do I get the slider to jump to where I click?  

[Ianko]

Hi Young,

I am afraid, this is not possible with the ItemTypes set to Tick. There is a feature request on the matter, you can vote for it via this feedback portal item.

Alternatively, you can use a custom solution to change the layout of the Items type slider:

<telerik:RadSlider ID="RadSlider1" runat="server" ItemType="item" Width="325px"
    Height="45px" AnimationDuration="400" CssClass="ItemSlider"
    ThumbsInteractionMode="Free" TrackPosition="BottomRight" Value="5" OnClientLoad="OnClientLoad">
    <Items>
        <telerik:RadSliderItem Text="1" Value="1"></telerik:RadSliderItem>
        <telerik:RadSliderItem Text="2" Value="2"></telerik:RadSliderItem>
        <telerik:RadSliderItem Text="3" Value="3"></telerik:RadSliderItem>
        <telerik:RadSliderItem Text="4" Value="4"></telerik:RadSliderItem>
        <telerik:RadSliderItem Text="5" Value="5"></telerik:RadSliderItem>
        <telerik:RadSliderItem Text="6" Value="6"></telerik:RadSliderItem>
        <telerik:RadSliderItem Text="7" Value="7"></telerik:RadSliderItem>
        <telerik:RadSliderItem Text="8" Value="8"></telerik:RadSliderItem>
        <telerik:RadSliderItem Text="9" Value="9"></telerik:RadSliderItem>
        <telerik:RadSliderItem Text="10" Value="10"></telerik:RadSliderItem>
    </Items>
</telerik:RadSlider>

<script type="text/javascript">
    function OnClientLoad(sender, args) {
        var $ = $telerik.$;
        var items = sender.get_items();

        for (var index in items) {
            var item = items[index].get_element();

            if ($(item).hasClass("rslItemFirst"))
                $(item).removeClass("rslItemFirst");

            $(item).addClass("rslLargeTick");
        }
    }
</script>

Regards,
Ianko
Telerik

 

 

[Young]

The last solution with the Javascript works!   Thank you Ianko!