Easy to use


ATTENTION!

Web programmer has to associate himself the task performance with appropriate slider position. 
<div class="range"></div>

Values setting


The amount of donation (multiple of $ 10):

<p>The amount of donation (multiple of $ 10): <strong id="amount" class="info"></strong></p>
<div id="rangeStep" class="range" data-range-step="10"></div>

<script>
    $("#rangeStep")
        .on("slide", function( event, ui ) {
            $('#amount').text( "$" + $( "#rangeStep" ).slider( "value" ) );
        });
</script>

The range of values


Identify the price range: $10 - $250

<p> Identify the price range: <strong id="amountPrice" class="info">$10 - $250</strong></p>
<div id="rangePrice" class="range" data-range-maxvalue="500" data-range-values="10,250"></div>
 
<script>
    var $rangePrice = $("#rangePrice");
    $rangePrice
        .on("slide", function( event, ui ) {
            $("#amountPrice").text(
                "$" + $rangePrice.slider("values", 0) +
                " - " +
                "$" + $rangePrice.slider("values", 1)
            );
        });
</script>

One-sided range


The maximum price:

<p>The maximum price: <strong id="amountMaxPrice" class="info"></strong></p>
<div id="rangeMaxPrice"
     class="range"
     data-range-type="min"
     data-range-value="19"
     data-range-maxvalue="200"
     ></div>
     
<script>
    var $rangeMaxPrice = $("#rangeMaxPrice");
    $rangeMaxPrice
        .on("slidechange", function( event, ui ) {
            $("#amountMaxPrice").text(
                "$" + $rangeMaxPrice.slider("value")
            );
        })
        .on("slide", function( event, ui ) {
            $("#amountMaxPrice").text(
                "$" + $rangeMaxPrice.slider("value")
            );
        });
</script>

Vertical slider


Volume:

<p>Volume: <strong id="amountVert" class="info"></strong></p>
<div id="rangeVert"
     class="range"
     data-range-type="min"
     data-range-value="25"
     data-range-minvalue="0"
     data-range-maxvalue="200"
     data-range-orientation="vertical"
     ></div>

<script>
    var $rangeVert = $("#rangeVert");
    $rangeVert
        .on("slidechange", function( event, ui ) {
            $("#amountVert").text(
                $rangeVert.slider("value")
            );
        })
        .on("slide", function( event, ui ) {
            $("#amountVert").text(
                $rangeVert.slider("value")
            );
        });
</script>

Range settings


Color alternative

The slider can easily be made more expressive for the particular context as well as the other components by adding one of the classes.

<div class="range"></div>
<div class="range success"></div>
<div class="range warning"></div>
<div class="range error"></div>
<div class="range info"></div>

Size

<div class="range larger"></div>
<div class="range large"></div>
<div class="range"></div>
<div class="range small"></div>