最佳答案
由jquery ui demo修改为选择时间
$(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>关于javascript - Jquery ui slider 时间范围，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29605288/