CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-ui-slider
markabarmi
markabarmi

Reputation: 255

jQuery slider for multiple boxes

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.

Upvotes: 1

Views: 356

Answers (1)

unconditional
unconditional

Reputation: 7656

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)

Upvotes: 2

Related Questions