I'm displaying a WebSlider on my page, but I don't know how to programmatically set the value of the slider. For example, I have a list of selectable values, and I display the slider to the right. When one of the selectable values is chosen by the user, I need to adjust the slider to the selected values, then the user can re-adjust by using the slider.
Nothing I've tried seems to work. What is the best way to get a reference to my WebSlider object on the client-side? Then, what method should I call to set it's value?
I'm using the following code to detect when the slider value has been adjusted by the user, and it works perfectly:
function WebSlider_ValueChanging(sender, e) { _currentOccupancySliderValue = e.get_newValue(); }
I just don't know how to manually set the value of the slider whenever I need to.
Thanks!
Hi Patrick,
The slider on client has member methods get_value() and set_value(newValue). There are many other methods and properties, please check documentation. You also may insert "debugger;" statement at any javascript method and inspect available/real member methods of slider/sender objects. Similar can be applied to eventArgs while processing events.
I wrote for you example, which sets value from bottom slider to upper slider, sets value to upper slider on button clicks and shows slider-value in text box.
<script type="text/javascript"> function setValue(val) { // find reference to top slider var slider = $find('<%=WebSlider1.ClientID%>'); if(!slider) return; // set value to slider slider.set_value(val); // get value of slider document.getElementById('showValue').value = slider.get_value(); } function WebSlider2_ValueChanged(sender, eventArgs) { setValue(eventArgs.get_newValue()); }</script><ig:WebSlider ID="WebSlider1" runat="server"></ig:WebSlider><ig:WebSlider ID="WebSlider2" runat="server"> <ClientEvents ValueChanged="WebSlider2_ValueChanged" /></ig:WebSlider><input type="button" value="setValue 20" onclick="setValue(20)" /><input type="button" value="setValue 30" onclick="setValue(30)" /><input id="showValue" />
Great - Thanks very much!