JQuery UI Slider

Sample code for a JQuery UI slider

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<div class="pct-slider" id="mondaySlider">
     <div class="color-region"></div>
    <div class="color-region"></div>
    <div class="color-region"></div>
    <div class="color-region"></div>
    
</div>

CSS

.ui-slider-tick {
        position: absolute;
        width: 2px;
        height: 25px;
        z-index: -1;
        font-size:11px;
        margin-top:50px;
    }

    .tick-labels {
        margin-top:25px;
        text-align:center;
        vertical-align:middle;
        margin-left:-19px;
        width:40px;
        line-height:14px;
    }

    /*.ui-slider-tick:nth-child(4n+1) {
        background-color: red!important;
    }*/

    .ui-slider-tick:nth-child(2n) { /* Times ending in :15 */
        height:20px;
    }
    .ui-slider-tick:nth-child(4n-1) { /* Times ending in :30 */
        height:15px;
    }

    .ui-slider-tick:nth-child(4n) { /* Times ending in :45 */
        height:20px;
    }
    .pct-slider {
        width: 95%;
        height:50px;
        margin-top:28px;
        margin-left: 1em;
        margin-left: 2.5%;
    }
.ui-slider-handle {
    width:5px !important;
    height:50px !important;
    margin-top:5px !important;
    margin-left:-1px !important;
    border:0 !important;
    cursor:ew-resize !important;
    background:#999 !important;
    outline:none;
    background-image:none !important;
    border-radius:0;
}

/* Add tooltips to slider handles */
 .ui-slider-handle:after {
    content : attr(data-value);
    position: absolute;
    bottom: 59px;
    left: -29px;
    min-width: 60px;
    height: 12px;
    background-color: #999;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    border: #999 1px solid;
    color: #fff;
    font: .7em/1em Arial, Sans-Serif;
    padding: 2px;
    text-align: center;
}
.ui-slider-handle:before {
    content:"";
    position: absolute;
    width: 0;
    height: 0;
    border-top: 8px solid #999;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    top: -8px;
    left: 50%;
    margin-left: -8px;
    margin-top: -1px;
}
/* markers */
.markers {
    margin-top:20px;
    position:relative;
    width:100%;
}
.one,.two,.three,.four {position:absolute; top:14px;...

JavaScript

var initialValues = [180, 435, 1080, 1320],
    updateValue = function (ui) {
    var hours = Math.floor(ui.value / 60);
    var minutes = ui.value - (hours * 60);

    if (hours.length == 1) hours = '0' + hours;
    if (minutes.length == 1) minutes = '0' + minutes;
    if (minutes == 0) minutes = '00';
    if (hours >= 12) {
        if (hours == 12) {
            hours = hours;
            minutes = minutes + " PM";
        } else {
            hours = hours - 12;
            minutes = minutes + " PM";
        }
    } else {
        hours = hours;
        minutes = minutes + " AM";
    }
    if (hours == 0) {
        hours = 12;
        minutes = minutes;
    }
    //console.log(ui.handle)
    $(ui.handle).attr('data-value', hours + ':' + minutes);
};

var timeLabels = ["12:00 a.m","1:00 a.m","2:00 a.m","3:00 a.m","4:00 a.m","5:00 a.m","6:00 a.m","7:00 a.m","8:00 a.m","9:00 a.m","10:00 a.m","11:00 a.m",
				  "12:00 p.m","1:00 p.m","2:00 p.m","3:00 p.m","4:00 p.m","5:00 p.m","6:00 p.m","7:00 p.m","8:00 p.m","9:00 p.m","10:00 p.m","11:00 p.m", "12:00 p.m"];
(function ($) {
    $.widget('my-namespace.customSlider', $.ui.slider, {
    	options: {
            ticks: false
        },
    
        // Called when the slider is instantiated.
        _create: function() {
            
            // Call the orginal constructor, creating the slider normally.
            this._super();
    
            // If the "ticks" option is false or the "step" option is
            // less than 5, there's nothing to do.
            if ( !this.options.ticks || this.options.step < 5 ) {
                return;
            }
    
            // Setup some variables for rendering the tick marks below the slider.
            var cnt = this.options.min,
                background = this.element.css( "border-color" ),
                left;
    
            while ( cnt <= this.options.max ) {

                // Compute the "left" CSS property for the next tick mark.
                left =...