JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-darkness/jquery-ui.css">
<div id="inputs" style="margin-top: 10px;">
      <div style="margin-top: 0px; margin-bottom: 2px;">
        <input type="text" name="date_start" id="date_start" style="width: 59%;" value="TEMPlate_date_start;">
        <input type="text" name="time_start" id="time_start" style="width: 30%;" value="TEMPlate_time_start;">
      </div>
      <div style="margin-top: 2px; margin-bottom: 2px;">
        <input type="text" name="date_end" id="date_end" style="width: 59%;" value="TEMPlate_date_end;">
        <input type="text" name="time_end" id="time_end" style="width: 30%;" value="TEMPlate_time_end;">
      </div>
</div>

<div style="margin-top: 5px; margin-bottom: 2px;">
      <input type="button" class="ts" value="Last 24h">
      <input type="button" class="ts" value="Last 2d">
      <input type="button" class="ts" value="Last 1w">
      <input type="button" class="ts" value="Last 30d">
    </div>
<!-- Here is DIV with SLIDER -->
<div style="margin-top: 6px;margin-bottom: 45px;">
      <div id="slider" style="width: 90%;"></div>
</div>

<!-- Here is flying DIV with slider value -->
<div id="amount" style="font-size: 13px;height: 15px;padding: 5px;width: 70px;position: relative;top: -25px;margin-bottom: -25px;color:#666;border:1px solid #CCC;background-color: #EEE; border-radius:5px;">Last 1 hour</div>

CSS

#slider {
    height: 20px;
}

JavaScript

$(function() {
    $('input.ts').click(function() {
        var btnText = $(this).val();
        if (btnText == 'Last 24h') {
            $('#slider').slider('value', 0);
            $('#date_start').val('TEMPlate_l24h_start;');
            $('#date_end').val('TEMPlate_l24h_end;');
            $('#time_start').val('TEMPlate_time_end;');
            $('#time_end').val('TEMPlate_time_end;');
        } else if (btnText == 'Last 2d') {
            $('#slider').slider('value', 10); // put correct value here
            $('#date_start').val('TEMPlate_l2d_start;');
            $('#date_end').val('TEMPlate_l2d_end;');
            $('#time_start').val('TEMPlate_time_end;');
            $('#time_end').val('TEMPlate_time_end;');
        } else if (btnText == 'Last 1w') {
            $('#slider').slider('value', 15); // put correct value here
            $('#date_start').val('TEMPlate_l1w_start;');
            $('#date_end').val('TEMPlate_l1w_end;');
            $('#time_start').val('TEMPlate_time_end;');
            $('#time_end').val('TEMPlate_time_end;');
        } else if (btnText == 'Last 30d') {
            $('#slider').slider('value', 25); // put correct value here
            $('#date_start').val('TEMPlate_l1m_start;');
            $('#date_end').val('TEMPlate_l1m_end;');
            $('#time_start').val('TEMPlate_time_end;');
            $('#time_end').val('TEMPlate_time_end;');
        }
        return false;
    });

    var mouseX = 0;
    var mouseY = 0;
    $(document).mousemove(function(e) {
        mouseX = e.pageX;
        mouseY = e.pageY;
    });

    function leadingZero(value) {
        return (value < 10 || value.length == 1) ? '0' + value : value;
    }

    var TEMPlate_slider_max = 30;
    var TEMPlate_slider_options_count = 10;

    // maximum value of slider
    var slider_max = TEMPlate_slider_max;
    // How many buttons are under slider
    var slider_options_count = TEMPlate_slider_options_count;
    // Unit for each of the button under slider
...