jQuery ui can be used to create a slider with updated value also getting displayed.
Syntax:
<div id="slider"></div>
<script>
$("#slider").slider();
</script>Example – slider and input text box – one way binding
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<div id="slider"></div><br/>
<input id="slidervalue" type="text" disabled></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript">
$(function () {
$("#slider").slider({
min: 10,
max: 90,
step: 2,
value: 10,
slide: function( event, ui ) {
$("#slidervalue").val(ui.value);
}
});
var initialValue = $("#slider").slider("option", "value");
$("#slidervalue").val(initialValue);
});
</script>
