JSFiddle - React, Tailwind, and code Playground

by Laxmikant Dange

HTML

<div id='slider'>
        <ul class='progbuttons'>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

CSS

body{
            background: #FAA;
        }
        .progbuttons li{
            background-color: #CCCCCC;
            width: 120px;
            height: 6px;
            margin: 4px 5px;
            outline: 0;
            border-radius: 0px;
            float:left;
            background-color:green;

        }
        ul{
            margin: 0px;
           list-style: none;
           padding-left:0px;
        }
        #slider{
            width:910px;
            padding:0px 5px;
            margin:auto;
            border:0px
        }
        .ui-slider-handle.ui-state-default.ui-corner-all{
            background: url('Handle.png');
            border-radius:50%;
            border:0px;
            height:24px;
            width:24px;
        }

JavaScript

$('#slider').slider({
     animate: "slow",
     value: 60,
     stop: onslide,
     min: 0,
     max: 900
 });

 function onslide(e) {
     var val = $('#slider').slider("value");
     moveSlider(val)
 }

 function moveSlider(val) {
     $('#slider').slider({
         value: 120 * Math.floor((val - Math.floor(val / 120) * 10) / 120) + 65 + Math.floor(val / 120) * 7
     });
 }