JSFiddle - React, Tailwind, and code Playground

by Rohit Bisht

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<div id="slider_div">
  <div id="slider"></div>
</div>

CSS

#slider label {
  position: absolute;
  width: 20px;
  margin-left: -10px;
  text-align: center;
  margin-top: 20px;
}

#slider {
  /* padding-top:2px; */
  height: 1px;
  width: 90%;
  margin: 2em auto;
}

.ui-state-default {
  border-radius: 50%;
}

JavaScript

$("#slider").slider({
    value: 4,
    min: 1,
    max: 7,
    step: 1,
    slide: function(event, ui) {
      console.log(ui.value);
    }
  })
  .each(function() {
    var opt = $(this).data().uiSlider.options;
    var vals = opt.max - opt.min;
    for (var i = 0; i <= vals; i++) {
      var el = $('<label>' + (i + 1) + '</label>').css('left', (i / vals * 100) + '%');
      $("#slider").append(el);
    }
  });