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

5 posts, 0 answers
  1. Young
    Young avatar
    15 posts
    Member since:
    Nov 2012

    Posted 28 Apr 2015 Link to this post

    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.

  2.
  3. Ianko
    Admin
    Ianko avatar
    1955 posts

    Posted 01 May 2015 Link to this post

    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
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  5. Young
    Young avatar
    15 posts
    Member since:
    Nov 2012

    Posted 05 May 2015 in reply to Ianko Link to this post

    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?  

  7. Ianko
    Admin
    Ianko avatar
    1955 posts

    Posted 07 May 2015 Link to this post

    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
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  8.
  9. Young
    Young avatar
    15 posts
    Member since:
    Nov 2012

    Posted 14 May 2015 in reply to Ianko Link to this post

    The last solution with the Javascript works!   Thank you Ianko!
Back to Top