The Price Range Slider Bar With Max And Min Prices

The Price Range Slider Bar With Max And Min Prices

The price range slider can be useful for allowing users to select a specific price range (min and max) when browsing products.

Demo

Source Code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JQuery UI Slider Price Range slider</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"> </script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"> </script>
<script>
$( function() {
$( "#slider-range" ).slider({
range: true,
min: 0,
max: 1000,
values: [ 200, 600 ],
slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
}
});
$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
" - $" + $( "#slider-range" ).slider( "values", 1 ) );
} );
</script>
</head>
<body>
<div id="codes">
<h1>JQuery  Slider Price Range Slider</h1>
<p>
<label for="amount">Price range:</label>
<input type="text" id="amount" readonly style="border:0; color:#FF0000; font-weight:bold;">
</p>
<div id="slider-range" class="mb-30"></div>
</div>
</body>
</html>

 

Leave a Reply

Your email address will not be published. Required fields are marked *