JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<body>
    <p>
        <label for="amount">Time range:</label>
        <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;">
    </p>
    <div id="slider-range"></div>
</body>

JavaScript

$(function () {
    $("#slider-range").slider({
        range: true,
        min: 0,
        max: 24,
        values: [4, 8],
        slide: function (event, ui) {
            if(ui.values[1] - ui.values[0] > 24)
                return false;
            if(ui.values[0] > 24)
                ui.values[0] = ui.values[0]-24;
            if(ui.values[1] > 24)
                ui.values[1] = ui.values[1]-24;
            $("#amount").val(ui.values[0] + ":00 - " + ui.values[1] + ":00");
        }
    });
    $("#amount").val($("#slider-range").slider("values", 0) +
        ":00 - " + $("#slider-range").slider("values", 1) + ":00");
});