Create a simple jQuery Slider

By using jQuery slider, I have customized the Css styles to give a different look. Click here to refer the jQuery API documentation. This will allow your users to select a value from a numerical range by simply dragging a slider.

Step 01:

Add following  script links to the header tags.

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

Will add a div to create a slider on it:

 <h2>Basic Example</h2>
 <div id="slider" class="slider"></div>

Within the Script block add following code to create a slider:

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

 for (var i = 0; i <= 10; i = i + 5) {
      var el = $('' + (i) + '').css('left', (i / 10 * 100 - 5) + '%');
      $("#slider").append(el);
    }
 
  

To make the slider more nice change default css class:

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

    #slider {
        margin-left: 20px;
        width: 50%;
    }

    .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;
    }

    .ui-slider .ui-slider-handle:before {
        content: '';
    }

You can get a working solution here

Final Result: