Demo of Change event of slider for continuous changing value using JQuery

Style

<style>
.ui-slider-horizontal {
    height: 12px;
    width: 550px;
    margin-left:10px;   
margin-top:150px;
margin-bottom:150px;
}
.ui-slider .ui-slider-handle {
    height: 20px;
    width: 18px;
    padding-left: 5px;
}
 .ui-slider-horizontal .ui-state-default {background: white url(../images/arrow.jpg) no-repeat scroll 50% 50%;}
</style>

HTML

<div id="slider"></div>
<div id=d1></div>

JQuery

<script>
$(document).ready(function() {
//////////////////////////
$(function() {
    $( "#slider" ).slider({value:50,min: 0,max: 100,step: 1,slide: function( event, ui ) {
                $( "#d1" ).html( ui.value );
         }

  });
  });
////////////////
})
</script>