jQuery slider (like input range) snapping to certain stepping points. Maximum and minimum values configurable.
A Pen by Oliver Schafeld on CodePen.
<div class="demo"> | |
<p> | |
<label for="amount">Volume:</label> | |
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" /> | |
</p> | |
<div id="slider-horizontal"></div> | |
</div> |
$( "#slider-horizontal" ).slider({ | |
orientation: "horizontal", | |
range: "min", | |
min: 0, | |
max: 200, | |
step:30, | |
value: 60, | |
slide: function( event, ui ) { | |
if(ui.value < 30 || ui.value > 150) | |
return false; | |
$( "#amount" ).val( ui.value ); | |
} | |
}); | |
$( "#amount" ).val( $( "#slider-horizontal" ).slider( "value" ) ); | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> |
jQuery slider (like input range) snapping to certain stepping points. Maximum and minimum values configurable.
A Pen by Oliver Schafeld on CodePen.
.demo { | |
/* slider stretches across full width by default */ | |
width: 200px; | |
} | |
/* TODO: Extract relevant style classes from jQuery UI theme and adapt */ |
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/base/jquery-ui.css" rel="stylesheet" /> |
Looks like this by default (jQuery UI theme):