Have an idea?

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

jQueryUI Sliders

Hello:

I hope someone can help me.  I am using jQueryUI Slider method to create a slider.

My HTML code is


<table border="0" cellpadding="4" cellspacing="4" width="700px">
<tr bgcolor="B7DBFF">
 <td colspan="3" align="left"> <b><font size="2" color="">&nbsp;3-day course of Rimadyl<br /> [1 injection + 2 tablets] $18.99
</font></b> </td>
  <td colspan="5"> &nbsp; </td>
  

  <td colspan="3" align="right"> <b><font size="2" color="">One Nocita injection<br /> for 3-day pain control $81.50</font></b> </td>
 </tr>

<tr>


<td colspan="15" height="30px"> <center><input type="hidden" name="CPB14_Answer" id="CPB14_Answer" style="border:0; color:#264283; font-weight:bold; width:15px;"></center> 
<div id="CPB14_Answer-min"></div>
</td>
  
</tr>

</table>

--------

<script>
 $(document).ready(function(){
              $('#CPB14_Answer-min').slider({
                range: 'min',
                value: 18.99,
                min: 18.99,
                max: 81.50,
                slide: function(e, ui) {
                    $('#CPB14_Answer').val(ui.value);
                    var slider = $('#CPB14_Answer-min');
                    var interval = setInterval(function(){
                    var left = $(slider).find('.ui-slider-handle').css('left');
                    $(slider).find('.semdifffill').css('width', left);
                    clearInterval(interval);
                }, 25);
                }
        });


 
 
       // Fix all sliders
        $('#[% QuestionName() %]_div .ui-slider').each(function(){
              var left = $(this).find('.ui-slider-handle').css('left');
            $(this).prepend('<div class="semdifffill" style="width: ' + left + ';"/>');
       });
        
          
})

  
 
</script>
 
 
 
 <style>
#CPB14_Answer-min.semdifffill,
 {
        position: relative;
        background-color: #A2AD00;
        height: 100%;
        z-index: 900;
}




.ui-slider-handle {
         
         z-index: 901 !important;

        
}

</style>




PROBLEM:
When I run a test and move the slider to the far right under 81.50 then view the data, the answer is 80.99, NOT 81.50 which it should be.  

I don't know what to do.  Please help

Thank you in advance.
asked Jul 20, 2021 by Sandy

1 Answer

0 votes
By default, the jQuery UI slider moves in steps of 1.  So it permits responses of 18.99, 19.99, 20.99, and so on.  Because your maximum is not one of these permitted responses, the closest the slider gives you is 80.99.  You may want to change your stepsize to a smaller amount to account for this:

min: 18.99,
max: 81.50,
step: 0.01,


https://api.jqueryui.com/slider/#option-step
answered Jul 20, 2021 by Zachary Platinum Sawtooth Software, Inc. (192,600 points)
Thank you!  That worked.
JQuery UI Slider - Handler
...