Create an hour slider

jQRangeSlider can be used to create date sliders, but also hour sliders.


Use jQDateRangeSlider

Use the default date range slider.

<!-- If you only need a date range slider -->
<script src="jQDateRangeSlider-min.js></script>

<!-- If you need multiple types of range sliders -->
<script src="jQAllRangeSliders-min.js></script>

Create a one day long range slider

// Create a date range slider
$("#slider").dateRangeSlider({
bounds: {min: new Date(2013, 0, 1), max: new Date(2013, 0, 1, 23, 59, 59)},
defaultValues: {min: new Date(2013, 0, 1, 8), max: new Date(2013, 0, 1, 18)}
});

Display hours with formatter option 

function TwoDigits(val){
if (val < 10){
return "0" + val;
}

return val;
}

$("#slider").dateRangeSlider({
bounds: {min: new Date(2013, 0, 1), max: new Date(2013, 0, 1, 23, 59, 59)},
defaultValues: {min: new Date(2013, 0, 1, 8), max: new Date(2013, 0, 1, 18)},
formatter: function(value){
var hours = value.getHours(),
minutes = value.getMinutes();
return TwoDigits(hours) + ":" + TwoDigits(minutes);
}
});

Experiment with jsfiddle

Play with this example in jsfiddle.

Feedback and Knowledge Base