JSFiddle - React, Tailwind, and code Playground

by dk_dragonknight

HTML

<label>Min</label><div id="slider"></div><label>Max</label>

CSS

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

/* below is not necessary, just for style */
#slider {
   width: 50%;
    float :left;
}

label
{
  float : left;
}

JavaScript

$( "#slider" ).slider({
    value: 4,
    min: 1,
    max: 7,
    step: 1
});