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>