JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.structure.min.css">
 <div class="label-wrapper">
   <h2>TIME FRAME</h2>
   <span id="time-label-start"></span>
 </div>
<div class="slider-2"></div>

CSS

.ui-slider-horizontal {
	height: 6px;
	width: 100%;
	background-color: #373c44;
	border-radius: 0;
}

.ui-slider-horizontal .ui-slider-handle {
	top: -.4em;
	margin-left: -.6em;
	border-radius: 50%;
	background-color: #373c44;
	border: none;
}

JavaScript

$('.slider-2').slider({
		 min:0, max:11, step: 1, value: 4,
     create: function( event, ui ) {
     		$('#time-label-start').empty().append($(".slider-2").slider("value"));
     },
     slide: function( event, ui ) {
     		$('#time-label-start').empty().append(ui.value);
     },
	   }
	 );