Range Slider: Limit Selected Value

[Dave Myers]

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?

[Tsvetie]

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.

[Dave Myers]

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.