Have an idea?

Visit Sawtooth Software Feedback to share your ideas on how we can improve our products.

jQueryUI Sliders

Hi,
I used the below link to create sliders. Everything was fine except a minor issue. The slider is in the starting portion when i come back to this question page after answering. In other words, the slider is not in the position where I moved. Please help me to correct this issue.

https://www.sawtoothsoftware.com/support/knowledge-base/programming-styling-issues/1613-how-to-use-jqueryui-sliders-in-ssi-web
asked Jun 18, 2020 by Abdul Bronze (2,885 points)
The "value" property defines the starting position.  Assuming you are using the same free format question and variable from that link, you can set the starting value with Sawtooth Script like this:

value: [% slider_value %],


Alternatively, there are slider questions within the Community Question Library that have this functionality baked in.
Thanks Zachary, however it doesn't work. Here is the code I use

 <div class="slideshow-container">

<div id="b1" class="mySlides fade">
  <p><center><b>Food</b></center></p>
    <script>
      $(function () {
        $("#slider-range-min1").slider({
          range: "min",
          value: 0,
          min: 0,
          max: 100,
          slide: function (event, ui) {
            $("#slider_value1").val(ui.value);
          }
        });
      });    
    </script>
    <p>
          <label for="amount">Percentage:</label>
          <input name="slider_value1" type="text" id="slider_value1" style="border:0; color:#f6931f; font-weight:bold;">
    </p>
    <div id="slider-range-min1"></div>
 </div>


after changing the code as per your advice

 <div class="slideshow-container">

<div id="b1" class="mySlides fade">
  <p><center><b>Food</b></center></p>
    <script>
      $(function () {
        $("#slider-range-min1").slider({
          range: "min",
          value: [% slider_value %],
          min: 0,
          max: 100,
          slide: function (event, ui) {
            $("#slider_value1").val(ui.value);
          }
        });
      });    
    </script>
    <p>
          <label for="amount">Percentage:</label>
          <input name="slider_value1" type="text" id="slider_value1" style="border:0; color:#f6931f; font-weight:bold;">
    </p>
    <div id="slider-range-min1"></div>
 </div>
The Sawtooth Script expects a variable named "value," but your input element expects a variable named "value1."
Sorry, I use this code only
 [% slider_value1 %] 
 but missed to update the correct logic while posting. However, that code was also not working.
I tried the below code which is perfectly working.
 value: $("#slider_value1").val(),

I would not have known the exact location to correct the logic without your help. Thank you Zachary.

Your solution to the original question

Please only use this to answer the original question. Otherwise please use comments.
Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.
Anti-spam verification:

To avoid this verification in future, please log in or register.
...