jQuery слайдер для нескольких ящиков

Question

У меня есть метод Asp.Net MVC create, в котором пользователь должен заполнить, сколько времени они связывают с планом. У меня есть следующий слайдер 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

Вот как вы можете использовать один и тот же движок для нескольких входов:

$(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>

Заметьте, что параметры ползунков хранятся в атрибутах input элементов (data-min, data-max, value)