Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
25
WebSlider - How to set value of slider client-side using java script?
posted

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!

  • 24497
    posted

    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" />