JSFiddle - React, Tailwind, and code Playground

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="slider"></div>
<span id="val"></span>

JavaScript

function pad(a){
    return a < 10 ? '0'+a : a;   
}

$("#slider").noUiSlider({
    range: { min: 0, max: (24*4) },
    start: 0,
    serialization: {
        lower: [new $.noUiSlider.Link({
            target: function(value){
                $("#val").html(pad(Math.floor(value/4)) + ":" + pad((value%4)*15));   
            },
            format: {
                decimals: 0   
            }            
        })]
    }    
});