Dana Dana - 3 months ago 10
jQuery Question

DateRangeSlider get the user selected values

It's the first time when I've worked with the DateRangeSlider (JQRangeSlider) and use it as a time slider: JSFiddle

The thing is that I need to get the displayed value that the user selected, for example: if the user selects the interval: 07:39 to 14:53, I would like to get those two values in format '.HH.mm'. After that if the 07:39 becomes 09:32 it should get this value every time the the user releases the mouse click.

I've tried using:

var test = $("#slider").dateRangeSlider("values");
var t1 = test.min;


But t1 gets the min value from the bounds (value of min2 from the Fiddle code). Is there any way to get the user selected values at every mouse release?

Answer

According to the documentation valuesMethod to get the values you need:

var dateValues = $("#slider").dateRangeSlider("values");

or you can use directly the valuesChanged event.

$('#slider').on('valuesChanged', function(e, data) {
    var min = ('00' + data.values.min.getHours()).slice(-2) + ':' + ('00' + data.values.min.getMinutes()).slice(-2);
    var max = ('00' + data.values.max.getHours()).slice(-2) + ':' + ('00' + data.values.max.getMinutes()).slice(-2);
    alert('Min: ' + min + '  Max: ' + max);
  });

  $('#btn').on('click', function(e) {
    var values =     $("#slider").dateRangeSlider('values');

    var min = ('00' + values.min.getHours()).slice(-2) + ':' + ('00' + values.min.getMinutes()).slice(-2);
    var max = ('00' + values.max.getHours()).slice(-2) + ':' + ('00' + values.max.getMinutes()).slice(-2);
    alert('Min: ' + min + '  Max: ' + max);
  })

Updated fiddle