JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/ui-lightness/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div id="slider-range"></div>

<div class="from time-day"></div>
<div class="to time-night"></div>

<button>Invert</button>

CSS

#slider-range { margin: 50px; }

JavaScript

$(document).ready(function() {

    $('button').click(function() {
        $('#slider-range, #slider-range .ui-slider-range').toggleClass('ui-widget-header ui-widget-content');
        var timeFrom = $(".from").text();
        var timeTo = $(".to").text();
        $(".from").html(timeTo).toggleClass("time-day").toggleClass("time-night");
        $(".to").html(timeFrom).toggleClass("time-night").toggleClass("time-day");
    });
    
    $("#slider-range").slider({
    		range: true,
        min: 0,
        max: 1439,
        values: [ 0, 1000 ],
        step: 15,
        slide: function(e, ui) {
            var hoursDay = Math.floor(ui.values[0] / 60);
            var minutesDay = ui.values[0] - (hoursDay * 60);

            var hoursNight = Math.floor(ui.values[1] / 60);
            var minutesNight = ui.values[1] - (hoursNight * 60);

            if(hoursDay.toString().length == 1) hoursDay = '0' + hoursDay;
            if(minutesDay.toString().length == 1) minutesDay = '0' + minutesDay;

            if(hoursNight.toString().length == 1) hoursNight = '0' + hoursNight;
            if(minutesNight.toString().length == 1) minutesNight = '0' + minutesNight;

            $('.time-day').text(hoursDay+':'+minutesDay);
            $('.time-night').text(hoursNight+':'+minutesNight);
        }
    });
    
});