How to set Slider control Value from ASP.NET AJAX Control Toolkit with JavaScript function?

Question

How to set Slider control Value from ASP.NET AJAX Control Toolkit with JavaScript function? Is this even possible?

Answer 1

Sure is! You have to set the value of asp:TextBox control that's associated with your SliderExtender to the value that you want. So for this ASP markup:

<asp:TextBox ID="sliderBox" runat="server" ClientIDMode="Static"></asp:TextBox>
<asp:SliderExtender ID="sliderBox_SliderExtender" runat="server" Enabled="True" 
    Maximum="100" Minimum="0" TargetControlID="sliderBox">
</asp:SliderExtender>
<asp:Button ID="incButton" runat="server" Text="incrementSlider" 
    onclientclick="change();" />

Which is basically:

1. an asp:TextBox named sliderBox (for the SliderExtender to use)
2. an asp:SliderExtender sliderBox_SliderExtender (with basically default values)
3. an asp:Button named incButton. This has an onClientClick property that calls the change() javascript function

And here is the change() function:

<script type="text/javascript">
    function change() {
        document.getElementById("sliderBox").value += 10;
    }
</script>

The change() function increments the value in the asp:TextBox control by 10, thus increasing the sliders position each time you click the button.