JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<div id="slider_time">
    
</div>

JavaScript

$(function() {
 var initialTime1 = 28800;
 var initialTime2 = 57600;

//object with html-tooltip and value in seconds

var valtooltip = function(sliderObj, ui){
    // if this is initializing, ui.values will be undefined, so set with slider values
        var sliderValue1 = (ui.values === undefined) ? sliderObj.slider("values", 0) : ui.values[0];
    var sliderValue2 = (ui.values === undefined) ? sliderObj.slider("values", 1) : ui.values[1];
        var val1 = '<span class="slider-tip">'+ sliderValue1 + '</span>';
        var val2 = '<span class="slider-tip">'+ sliderValue2 + '</span>';
sliderObj.find('.ui-slider-handle:first').html(val1);
sliderObj.find('.ui-slider-handle:last').html(val2);                   
};

$("#slider_time").slider({
   min: 0,
   max: 86400,
   step: 300, // 300s steps
   values: [initialTime1, initialTime2], 
   range: true, // two sides
   create: function(event,ui){
            valtooltip($(this),ui);
   },
   slide: function(event,ui){
            valtooltip($(this),ui);
        // values for hidden inputs
        for (var i = 0; i < ui.values.length; ++i) {
        //values for tooltip 0 and 1
        $(".sliderValue[data-index=" + i + "]").val( ui.values[i]);
        //values for value in hidden inputs 
        $(".sliderValue[data-index=" + i + "]").attr('value', ui.values[i]);
        }
   }, 
   stop: function(event,ui){
           valtooltip($(this),ui);
   }
 });
});