jQuery UI - Slider

HTML

<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

<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"></div>

JavaScript

$(document).ready(function() {
  // Init slider
  $("#slider-range-max").slider({
    range: "max",
    value: 37,
    min:   30,
    max:   50,
    slide: function (event, ui) {
      $("#amount").val(ui.value);
    }
  });

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

    // Set imput-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();
  });

});