複数のボックスのjQueryスライダー

Question

私はAsp.Net MVCメソッドを作成しています。このメソッドでは、ユーザーがプランに関連付けられている時間を記入する必要があります。私は1つのボックスに入力する次のjqueryスライダを持っています。私は今、週の時間と分のすべての日に同じようにスライダーが必要です。

は現在、私は

$("#slider-range-max").click(function() { 
     $("#MondayMinutes").slider({ 
      range: "max", 
      min: 0, 
      max: 59, 
      value: 15, 
      slide: function (event, ui) { 
       $("#MondayMinutes").val(ui.value); 
      } 
     }); 
     $("#MondayMinutes").val($("#slider-range-max").slider("value")); 
    }); 

    $("#MondayHours").click(function() { 
     $("#slider-range-max").slider({ 
      range: "max", 
      min: 1, 
      max: 12, 
      value: 2, 
      slide: function (event, ui) { 
       $("#MondayHours").val(ui.value); 
      } 
     }); 
     $("#MondayHours").val($("#slider-range-max").slider("value")); 
    }); 

を持っている。しかし、私は、曜日ごとにそれをしなければならないか、これを行うためのより効率的な方法があるのでしょうか？

多くのありがとうございます。

Answer 1

ここでは、複数の入力のために同じスライダーを使用することができます方法は次のとおりです。スライダーオプションはinput要素（data-min、data-max、value）の属性に格納されていることを

$(function() { 
 
    // Init slider 
 
    $("#slider-range-max").slider({ 
 
    range: "max" 
 
    }); 
 

 
    // Show it on an input click 
 
    $('.my-slider-input').on('click', function(){ 
 
    var $this_input=$(this); 
 
    var $slider_node=$('#slider-range-max'); 
 

 
    // Set input-specific slider options 
 
    $slider_node.slider('option', { 
 
     min: $this_input.data('min'), 
 
     max: $this_input.data('max'), 
 
     value: $this_input.val(), 
 
     slide: function (event, ui) { 
 
     $this_input.val(ui.value); 
 
     } 
 
    }); 
 

 
    // Show the slider in place 
 
    $slider_node.insertAfter($this_input).show(); 
 
    }); 
 

 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
 

 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css"> 
 

 

 
<div> 
 
<label for="mon-h">Mon hours:</label> 
 
<input type="text" id="mon-h" class="my-slider-input" data-min="1" data-max="12" value="2" /> 
 
</div> 
 
<div> 
 
<label for="mon-m">Mon minutes:</label> 
 
<input type="text" id="mon-m" class="my-slider-input" data-min="0" data-max="59" value="15" /> 
 
</div> 
 
<div> 
 
<label for="tue-h">Tue hours:</label> 
 
<input type="text" id="tue-h" class="my-slider-input" data-min="1" data-max="12" value="2" /> 
 
</div> 
 
<div> 
 
<label for="tue-m">Tue minutes:</label> 
 
<input type="text" id="tue-m" class="my-slider-input" data-min="0" data-max="59" value="15" /> 
 
</div> 
 

 
<div id="slider-range-max" style="display: none;"></div>

注