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.