jQ timeslider

by Ivan Gerasimenko

HTML

<link rel="stylesheet" href="http://jdewit.github.io/bootstrap-timepicker/css/bootstrap-timepicker.min.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.0/css/bootstrap.min.css">
<input type="text" />
<div class="bootstrap-timepicker-widget dropdown-menu timepicker-orient-left timepicker-orient-top open" style="top: 35px; left: 10px">
    <label>Hour:</label>
    <input type="range" min="0" max="23" class="hour" />
    <div style="clear: both"></div>
    <label>Minute:</label>
    <input type="range" min="0" max="59" class="minute" />
</div>
<div class="slider-timepicker" style="margin-top: 80px;">
    <div>
        <label>Часы:</label>
        <div class="slider-sceleton">
            <div class="slider-highlight" style="width: 33%"></div>
            <div class="slider-handle" style="left: 33%"></div>
        </div>
    </div>
    <div>
        <label>Минуты:</label>
        <div class="slider-sceleton">
            <div class="slider-highlight" style="width: 33%"></div>
            <div class="slider-handle" style="left: 33%"></div>
        </div>
    </div>
</div>

<div class="bootstrap-timepicker-widget dropdown-menu slider-timepicker open" style="top: 35px; left: 300px">
    <div>
        <label>Часы:</label>
        <div class="slider-sceleton">
            <div class="slider-highlight" style="width: 33%"></div>
            <div class="slider-handle" style="left: 33%"></div>
        </div>
    </div>
    <div>
        <label>Минуты:</label>
        <div class="slider-sceleton">
            <div class="slider-highlight" style="width: 33%"></div>
            <div class="slider-handle" style="left: 33%"></div>
        </div>
    </div>
    <div>
        <label>Часы:</label>
        <div class="slider-time"></div>
    </div>
    <div>
        <label>Минуты:</label>
        <div class="slider-time"></div>
    </div>
</div>

<input type="text" id="timeinput" />

CSS

body { padding: 20px; padding-bottom: 80px;}
.bootstrap-timepicker-widget  label {
    float: left;
    width: 50px;
}

.bootstrap-timepicker-widget  .hour,
.bootstrap-timepicker-widget  .minute {
    width: 150px;
    margin-left: 0px;
    float: left;
}

/* slider structure - crossbrowser */
.slider-sceleton {
    margin: 10px 10px 15px 20px;
    width: 150px;
    
    height: 0.8em;
    position: relative;
    /*-webkit-border-radius: 4px/*{cornerRadius}*//*;*/
    border: 1px solid #aaaaaa/*{borderColorContent}*/;
}
.slider-highlight {
    height: 100%;
    position: absolute;
    z-index: 1;
    background: #cccccc/*{bgColorHeader}*/;
    /*-webkit-border-radius: 4px;*/
}
.slider-handle {
    position: absolute;
    z-index: 2;
    height: 1.2em;
    width: 1.2em;
    top: -0.3em;
    margin-left: -0.6em;
    border: 1px solid #d3d3d3/*{borderColorDefault}*/;
    background: #e6e6e6/*{bgColorDefault}*/;
}
.slider-handle:hover {
    border: 1px solid #bdbdbd;
}
.slider-sceleton, /* decoration */
.slider-sceleton > div {
    -webkit-border-radius: 4px;
}
.slider-sceleton {
    box-shadow: inset 0 0.1em 0.2em rgba(0,0,0,.2);
}
.slider-handle {
    -webkit-box-shadow: 0 0.1em 0.2em rgba(0,0,0,.15);
    -moz-box-shadow: 0 0.1em 0.2em rgba(0,0,0,.15);
    box-shadow: 0 0.1em 0.2em rgba(0,0,0,.15);
}
    /* slider-timepicker */
.slider-timepicker label {
    display: block;
    float: left;
    margin-left: 10px;
}
.slider-timepicker .slider-sceleton {
    margin-left: 80px;
    top: 4px;
}

/* SECONDS PART */
.slider-time {
    margin: 10px 10px 15px 20px;
    width: 150px;
    
    height: 0.7em;
    position: relative;
    /*-webkit-border-radius: 4px/*{cornerRadius}*//*;*/
    border: 1px solid #aaaaaa/*{borderColorContent}*/;
    
    box-shadow: inset 0 0.1em 0.2em rgba(0,0,0,.2);
    margin-left: 80px;
    top: 4px;
}

JavaScript

// since type=range is only valid in ie10+ and not in a cool way
// we are in need to replace it with html-blocks (like chosen-plugin)
// http://habrahabr.ru/post/101415/
/* jTimepicker plugin 1.4.1 (as one example)
 * http://www.radoslavdimov.com/jquery-plugins/jquery-plugin-jtimepicker/
 */
// https://github.com/smalot/bootstrap-datetimepicker
// make extention for:
// https://github.com/Eonasdan/bootstrap-datetimepicker

var sliderHighlight = '<div class="slider-highlight" style="width: 33%"></div>';

$( ".slider-time" )
    .slider()
    /*.prepend(sliderHighlight)*/
    .on('slide slidechange slidestop', function(event, ui) {
        console.log(
            Math.floor(59 * parseInt($(this).find('a').css("left"), 10) / $(this).width())
        );
        /*var widthPercent = 
            (100 * parseInt($(this).find('a').css("left"), 10) / $(this).width()) + "%";
        $(this).find(".slider-highlight").css("width", widthPercent);*/
        
    });

(function($) { // <-- protecting $ alias (псевдоним)
    $.fn.slidetimepicker = function (options) {
        var $this = $(this);
        $this.after(
            '<div style="position: relative; display: none"><div class="bootstrap-timepicker-widget dropdown-menu slider-timepicker open" style="top: -5px; left: 30px">\
    <div>\
        <label>Часы:</label>\
        <div class="slider-time hours"></div>\
    </div>\
    <div>\
        <label>Минуты:</label>\
        <div class="slider-time minutes"></div>\
    </div>\
</div></div>');

        $( ".slider-time" ).slider();
        var hours = new Date().getHours();
        var minutes = new Date().getMinutes();
        
        $this.next().find(".hours > a").css("left", (100*hours/23)+"%");
        $this.next().find(".minutes > a").css("left", (100*minutes/59)+"%");
        
        $this.val(getTimeString(hours, minutes));
        
        $this.next().find(".hours").on('slide slidechange',function(event,ui) {
            var hour = getSliderHour($(this));
  ...