JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/redmond/jquery-ui.css">
<div class="container">
<div id="label">Please slide !</div>
<div id="slider"></div>
<input type="text" id="days" />
</div>

CSS

.container {width : 80%; margin: 0px auto;}
#label{
    margin-bottom:5px;
    border : 1px solid red;
    width : 100px;
    height : 20px;
    line-height : 20px;
    position:relative;
    text-align : center;
}

JavaScript

$(function() {
   var labelArr = new Array("", "1 hour", "12 hours", "1 day", "3 day", "1 week");
   var initialValue=3, min=1, max=5;
   $("#slider").slider({
      value:initialValue,
      min: min,
      max: max,
      step: 1,
      slide: function( event, ui ) {
          $("#days").val( ui.value );
          $("#label").text(labelArr[ui.value]);
          $("#label").css("margin-left", (ui.value-min)/(max-min)*100+"%");
          $("#label").css("left", "-50px");
      }
  });
  $("#days").val(initialValue);
  $("#label").text(labelArr[initialValue]);
  $( "#label" ).css("margin-left", (initialValue -1)/(max-min)*100+"%");
  $("#label").css("left", "-50px");
});