範圍滑塊值不會返回到初始值

Question

<script> 
    $(function() { 
     $('#slider').slider({ 
     min: 0, 
     max: 1000, 
     value: 100, 
      slide: function (ev, ui) { 

       var total = ui.value; 
       $('#slider').not(this).each(function() { 
        total += $(this).slider('value'); 
       }) 
       if (total < 100) { 
        return false; 
       } 
       $(".order").html(total); 

      } 

     }); 
    }); 
</script> 



<div id="slider"></div> 
<div class="cal_table"> 
    <table style="text-align: left;" border="1"> 
    <tr> 
     <td>Orders  :<span style="text-align: right" class="order">0</span> 
     </td> 
    </tr> 
</div> 

我正在製作一個範圍滑塊，其起始限制爲100.當頁面加載時，它的工作原理應該如此，但是當我從增加的值滑回100時，這些值是隨機的（接近100.eg，103,132,110）。這取決於我滑動的速度。它永遠不會回到100，除非我很慢地將其滑回。

Answer 1

這是默認行爲。您可以指定step的值。例如，如果您設置step=5。這總是會滑動5步。另外，如果您希望滑塊從100開始。請設置min=100。對於你的問題，你可以做到以下幾點：

<script> 
    $(function() { 
     $('#slider').slider({ 
     min: 0, 
     max: 1000, 
     value: 100, 
      slide: function (ev, ui) { 

       var total = ui.value; 
       if (total < 100){ 
        //This will set the slider to 100 again if user will slide it less than 100 
        $("#slider").slider('value',100); 
        $("#slider").trigger('change'); 
        return false; 
       } 

       $('#slider').not(this).each(function() { 
        total += $(this).slider('value'); 
       }); 

       $(".order").html(total); 

      } 

     }); 
    }); 
</script>