Snappy Slider

index.html

<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>

script.js

$( "#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" ) );

scripts

<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>

snappy-slider.markdown

Snappy Slider

jQuery slider (like input range) snapping to certain stepping points. Maximum and minimum values configurable.

A Pen by Oliver Schafeld on CodePen.

License.

style.css

.demo {
  /* slider stretches across full width by default */
  width: 200px;
}

/* TODO: Extract relevant style classes from jQuery UI theme and adapt */

styles

<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):