JSFiddle - React, Tailwind, and code Playground

by Alexander Startsev

HTML

<script src="http://refreshless.com/nouislider/source/jquery.nouislider.js"></script>
<link rel="stylesheet" href="http://refreshless.com/nouislider/source/jquery.nouislider.css">
<div id="time-slider" class="slider"></div>
<span class="time start-time">12:00</span>
<span class="time finish-time">00:00</span>

CSS

/* base reset */
*{
    margin: 0;
    padding: 0;
}

body{
    padding: 30px;
    position: relative;
}

.slider{
    width: 300px;
    position: relative;
    left: 50px;
}

.time{
    position: absolute;
    top: 32px;
    font: 300 14px/14px Arial, sans-serif;
}

.start-time{
    left: 20px;
}

.finish-time{
    left: 404px;
}

JavaScript

$(function(){
    $("#time-slider").noUiSlider({
        range: {
            'min': [720],
            'max': [1440]
        }
        ,start: [720, 1440]
        ,handles: 2
        ,step: 10
        ,margin: 20
        ,connect: true
        ,behaviour: 'tap-drag'
        ,serialization: {
            format: {
                decimals: 1            
            }
        }
    });
    $("#time-slider").on('slide', function(){
    				var startTime = $(this).val()[0],
				    finishTime = $(this).val()[1];
                    console.log($(this).val());
            startTime = parseInt(startTime / 60) + ':' +  (parseInt(startTime % 60) == 0 ? '00' : parseInt(startTime % 60));
            finishTime = (parseInt(finishTime / 60) == 24 ? '00' : parseInt(finishTime / 60)) + ':' + (parseInt(finishTime % 60) == 0 ? '00' : parseInt(finishTime % 60));
				$('.start-time').text(startTime);
				$('.finish-time').text(finishTime);
    });
});