多个框的jQuery滑块

Question

I have a Asp.Net MVC create method in which a user must fill out how much time they are associating to a plan. I have the following jquery slider which populates one box. I now need the slider to do the same for all days of the week hours and minutes.

Currently I have

 $("#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"));
    });

But would I have to do that for each day of the week or is there a more efficient way of doing this?

Many thanks.

Answer 1

Here's how you can use the same slider for multiple inputs:

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

Note that slider options are stored in the attributes of input elements ( data-min , data-max , value )