Jquery ui slider range between times
Question
How can I make a jQuery UI slider in the gaps and to?
For example: from 00:00:00 to 00:30:31
Example here , in Track filter -> Length
3 answers
solution1
1 ACCPTED 2015-04-13 13:10:53
Modified from jquery ui demo to select time
$(function() { function pad(num, size) { var s = num+""; while (s.length < size) s = "0" + s; return s; } var formatSecs = function(totalsecs) { var hour = parseInt( totalsecs / 3600, 10) % 24; var min = parseInt( totalsecs / 60, 10) % 60; var secs = totalsecs % 60; return pad(hour,2)+":"+pad(min,2)+":"+pad(secs,2); }; $( "#slider-range" ).slider({ range: true, min: 0, max: 86400, values: [ 7200, 72000 ], slide: function( event, ui ) { var min = ui.values[0]; var max = ui.values[1]; $( "#amount" ).val( formatSecs(min)+" - "+formatSecs(max) ); } }); $( "#amount" ).val( formatSecs($( "#slider-range" ).slider( "values", 0 ))+" - "+formatSecs($( "#slider-range" ).slider( "values", 1 )) ); });
.ui-slider-range { background: rgb(255, 130, 37); }
<script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <body> <p> <label for="amount">Time range:</label> <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;"> </p> <div id="slider-range"></div> </body>
solution2
0 2015-04-13 13:06:45
From the jQuery docs :
<p>
<label for="amount">Price range:</label>
<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider-range"></div>
<script>
$(function() {
$( "#slider-range" ).slider({
range: true,
min: 0,
max: 500,
values: [ 75, 300 ],
slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
}
});
$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
" - $" + $( "#slider-range" ).slider( "values", 1 ) );
});
</script>
Edit
Added a time format for the slider
solution3
0 2015-04-13 13:09:52
Refer here
http://jsfiddle.net/4e4sddrf/
Javascript code
$("#slider-range").slider({
range: true,
min: 0,
max: 1440,
step: 15,
values: [600, 720],
slide: function (e, ui) {
var hours1 = Math.floor(ui.values[0] / 60);
var minutes1 = ui.values[0] - (hours1 * 60);
if (hours1.length == 1) hours1 = '0' + hours1;
if (minutes1.length == 1) minutes1 = '0' + minutes1;
if (minutes1 == 0) minutes1 = '00';
if (hours1 >= 12) {
if (hours1 == 12) {
hours1 = hours1;
minutes1 = minutes1 + " PM";
} else {
hours1 = hours1 - 12;
minutes1 = minutes1 + " PM";
}
} else {
hours1 = hours1;
minutes1 = minutes1 + " AM";
}
if (hours1 == 0) {
hours1 = 12;
minutes1 = minutes1;
}
$('.slider-time').html(hours1 + ':' + minutes1);
var hours2 = Math.floor(ui.values[1] / 60);
var minutes2 = ui.values[1] - (hours2 * 60);
if (hours2.length == 1) hours2 = '0' + hours2;
if (minutes2.length == 1) minutes2 = '0' + minutes2;
if (minutes2 == 0) minutes2 = '00';
if (hours2 >= 12) {
if (hours2 == 12) {
hours2 = hours2;
minutes2 = minutes2 + " PM";
} else if (hours2 == 24) {
hours2 = 11;
minutes2 = "59 PM";
} else {
hours2 = hours2 - 12;
minutes2 = minutes2 + " PM";
}
} else {
hours2 = hours2;
minutes2 = minutes2 + " AM";
}
$('.slider-time2').html(hours2 + ':' + minutes2);
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
JQuery ui range slider
jQuery UI range slider - grab the bar between the handles
jQuery UI range slider with letters
jQuery UI range slider tooltips
jQuery UI range slider plugin conflicts with jQuery Mobile slider
jQuery ui range slider gives wrong value
jquery ui slider range fix to RTL
Jquery UI Range Slider - Convert number to currency
How to change jQuery UI range slider width
jQuery UI slider: small steps on large range
Related Tags