JSFiddle - React, Tailwind, and code Playground

by Rusln

HTML

<div class="label"></div>
<div class="slidebar"><div class="slidehandle"></div></div>

CSS

.slidebar {
  position: relative;
  width: 200px;
  height: 20px;
  border: 1px solid #ccc;
  //box-shadow: inset 3px 3px 5px #ccc;
  border-radius: 20px;
  
}

.slidehandle {
  /*position: relative;*/
  width: 15px;
  height: 15px;
/*  clear:both;*/
  border-radius: 100%;
/* -webkit-transform: rotate(45deg);
     -moz-transform: rotate(45deg);*/
  border: 1px solid #ccc;
  box-shadow: inset -3px -3px 5px #ccc
}
  .slidehandle:hover {
   box-shadow: inset -3px -3px 5px #bbb
  }
  .slidehandle:active {
   box-shadow: inset 3px 3px 5px #bbb
  }

JavaScript

$('.slidehandle').draggable({
  axis: "x",
  containment: "parent",
  //distance: -20,
  grid: [20, 0]
});