JSFiddle - React, Tailwind, and code Playground

by Aruna Perera

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<div id="slider"></div>

CSS

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

    #slider {
        margin-left:20px;
        width: 50%;
    margin-top:50px;
    }
.ui-slider-horizontal
{
background: -webkit-linear-gradient(top, #bbb, #ddd);
box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
border-radius: 8px;
border: 1px solid #aaa;
height:4px;
  
}
.ui-state-default, .ui-widget-content .ui-state-default {
    background: #8DCA09;
background: -webkit-linear-gradient(top, #8DCA09, #72A307);
background: -moz-linear-gradient(top, #8DCA09, #72A307);
background: linear-gradient(top, #8DCA09, #72A307);
-webkit-box-shadow: inset 0 2px 2px rgba(255,255,255,0.5), 0 2px 8px rgba(0,0,0,0.2);
-moz-box-shadow: inset 0 2px 2px rgba(255,255,255,0.5), 0 2px 8px rgba(0,0,0,0.2);
box-shadow: inset 0 2px 2px rgba(255,255,255,0.5), 0 2px 8px rgba(0,0,0,0.2);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: 1px solid #496805;
width: 16px;
height: 16px;
   margin-top:-2px;
}
.ui-slider-handle:hover
{
    background: -webkit-linear-gradient(top, #8DCA09, #8DCA09);
    cursor:pointer;

}
.ui-slider-handle:focus{
    outline: 0;
}

JavaScript

$("#slider").slider({
        min: 0,
        max: 10,
        step: 5,
         value:5,
    });

    for (var i = 0; i <= 10; i = i + 5) {

        var el = $('<label>' + (i) + '</label>').css('left', (i / 10 * 100) + '%');

        $("#slider").append(el);

    }