Here is my fiddle for this (I also looked for something, and then decided to create it): http://jsfiddle.net/Lcrsd3jt/45/
HTML:
<script type='text/javascript' src='//code.jquery.com/jquery-2.0.2.js'></script> <script type="text/javascript" src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"> <div id="time-range"> <p>Time Range: <span class="slider-time"></span> - <span class="slider-time2"></span> </p> <div class="sliders_step1"> <div id="slider-range"></div> </div> </div>
JS:
var dt_from = "2014/11/01 00:34:44"; var dt_to = "2014/11/24 16:37:43"; $('.slider-time').html(dt_from); $('.slider-time2').html(dt_to); var min_val = Date.parse(dt_from)/1000; var max_val = Date.parse(dt_to)/1000; function zeroPad(num, places) { var zero = places - num.toString().length + 1; return Array(+(zero > 0 && zero)).join("0") + num; } function formatDT(__dt) { var year = __dt.getFullYear(); var month = zeroPad(__dt.getMonth()+1, 2); var date = zeroPad(__dt.getDate(), 2); var hours = zeroPad(__dt.getHours(), 2); var minutes = zeroPad(__dt.getMinutes(), 2); var seconds = zeroPad(__dt.getSeconds(), 2); return year + '-' + month + '-' + date + ' ' + hours + ':' + minutes + ':' + seconds; }; $("#slider-range").slider({ range: true, min: min_val, max: max_val, step: 10, values: [min_val, max_val], slide: function (e, ui) { var dt_cur_from = new Date(ui.values[0]*1000);
CSS
#time-range p { font-family:"Arial", sans-serif; font-size:14px; color:#333; } .ui-slider-horizontal { height: 8px; background: #D7D7D7; border: 1px solid #BABABA; box-shadow: 0 1px 0 #FFF, 0 1px 0 #CFCFCF inset; clear: both; margin: 8px 0; -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; } .ui-slider { position: relative; text-align: left; } .ui-slider-horizontal .ui-slider-range { top: -1px; height: 100%; } .ui-slider .ui-slider-range { position: absolute; z-index: 1; height: 8px; font-size: .7em; display: block; border: 1px solid #5BA8E1; box-shadow: 0 1px 0 #AAD6F6 inset; -moz-border-radius: 6px; -webkit-border-radius: 6px; -khtml-border-radius: 6px; border-radius: 6px; background: #81B8F3; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgi…pZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0%, #A0D4F5), color-stop(100%, #81B8F3)); background-image: -webkit-linear-gradient(top, #A0D4F5, #81B8F3); background-image: -moz-linear-gradient(top, #A0D4F5, #81B8F3); background-image: -o-linear-gradient(top, #A0D4F5, #81B8F3); background-image: linear-gradient(top, #A0D4F5, #81B8F3); } .ui-slider .ui-slider-handle { border-radius: 50%; background: #F9FBFA; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgi…pZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0%, #C7CED6), color-stop(100%, #F9FBFA)); background-image: -webkit-linear-gradient(top, #C7CED6, #F9FBFA); background-image: -moz-linear-gradient(top, #C7CED6, #F9FBFA); background-image: -o-linear-gradient(top, #C7CED6, #F9FBFA); background-image: linear-gradient(top, #C7CED6, #F9FBFA); width: 22px; height: 22px; -webkit-box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.6), 0 -1px 0 1px rgba(0, 0, 0, 0.15) inset, 0 1px 0 1px rgba(255, 255, 255, 0.9) inset; -moz-box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.6), 0 -1px 0 1px rgba(0, 0, 0, 0.15) inset, 0 1px 0 1px rgba(255, 255, 255, 0.9) inset; box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.6), 0 -1px 0 1px rgba(0, 0, 0, 0.15) inset, 0 1px 0 1px rgba(255, 255, 255, 0.9) inset; -webkit-transition: box-shadow .3s; -moz-transition: box-shadow .3s; -o-transition: box-shadow .3s; transition: box-shadow .3s; } .ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 22px; height: 22px; cursor: default; border: none; cursor: pointer; } .ui-slider .ui-slider-handle:after { content:""; position: absolute; width: 8px; height: 8px; border-radius: 50%; top: 50%; margin-top: -4px; left: 50%; margin-left: -4px; background: #30A2D2; -webkit-box-shadow: 0 1px 1px 1px rgba(22, 73, 163, 0.7) inset, 0 1px 0 0 #FFF; -moz-box-shadow: 0 1px 1px 1px rgba(22, 73, 163, 0.7) inset, 0 1px 0 0 white; box-shadow: 0 1px 1px 1px rgba(22, 73, 163, 0.7) inset, 0 1px 0 0 #FFF; } .ui-slider-horizontal .ui-slider-handle { top: -.5em; margin-left: -.6em; } .ui-slider a:focus { outline:none; }
You need to treat the date-time as a timestamp and just use the standard slider for an integer, recounting the date-time for input (or something else) on the fly when moving the slider.