Range Slider: Limit Selected Value

3 posts, 0 answers
  1. Dave Myers
    Dave Myers avatar
    47 posts
    Member since:
    Sep 2008

    Posted 13 Oct 2009 Link to this post

    I have a situation where i would like to present the full set of possible values in a range slider....say 0-20 but would like to be able to limit the selections to where a user cannot select below or above a certain value....say 5-10.  Is this possible?  Would I have to handle this in the OnClientValueChange event?  If handling in the OnClientValueChange, is there a code snipet showing how to stop the handle from moving past a certain value?
  2. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 14 Oct 2009 Link to this post

    Hi Dave Myers,
    You need to handle the beforeValueChange client event of the RadSlider control in order to cancel the change of the value. In order to do this, you have to use the set_cancel method of the second parameter that the handler gets. For example:
    <script type="text/javascript">
        function OnClientBeforeValueChange(sender,args)
        {
            var newValue = args.get_newValue();
            if(newValue < 5 || newValue > 10)
                args.set_cancel(true);
        }
    </script>
     
    <telerik:RadSlider ID="RadSlider1" runat="server" MinimumValue="0" MaximumValue="20"
        Value="7" SmallChange="1" LargeChange="5" ItemType="Tick" Height="60px" TrackPosition="BottomRight"
        OnClientBeforeValueChange="OnClientBeforeValueChange">
    </telerik:RadSlider>

    Kind regards,
    Tsvetie
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Dave Myers
    Dave Myers avatar
    47 posts
    Member since:
    Sep 2008

    Posted 14 Oct 2009 Link to this post

    Thanks.  I ended up solving it using the OnClientSlideEnd event.  It makes for a "bounce back" effect where you can actually slide the handle past the min or max and it "bounces" back.  Here is the code i used:

    code behind:
    slider.MinimumValue = 0  
    slider.MaximumValue = 20  
    slider.SelectionStart = 5  
    slider.SelectionEnd = 10  
    slider.Attributes.Add("sliderClientMaxValue""5")  
    slider.Attributes.Add("sliderClientMinValue""10")  
    slider.OnClientSlide = "sliderEndSlide"  
      
    'Added attributes that specify the max and min value on the client side (not the slider)  

    client:
    function sliderEndSlide(sender, args){ 
            var sliderMin; 
            var sliderMax; 
             
            sliderMin = sender.get_element().getAttribute('sliderClientMinValue'); 
            sliderMax = sender.get_element().getAttribute('sliderClientMaxValue'); 
         
            if (sender.get_selectionStart() < sliderMin){ 
                sender.set_selectionStart(sliderMin); 
            } 
             
            if (sender.get_selectionEnd() > sliderMax){ 
                sender.set_slectionEnd(sliderMax); 
            } 

    So, this slider will have a range of 0-20, but only allow the user to select a min or max between 5 and 10.  If the user tries to slide one of handles to 3, it will "bounce back" to 5.
Back to Top