Menu
In some of the websites which make sales, there is a bar that you can set maximum and minimum price. I don't know technical name of it but i have a screenshot.
How can i do that with html?
Thanks in advance.
396
asked Feb 26 '14 13:02
A maximum price is set in the interests of consumers to protect them from paying unreasonably high prices for essential goods and services, for example housing, petrol or certain food items. By imposing maximum price, producers receive less profit.
Maximum prices can reduce the price of food to make it more affordable, but the drawback is a maximum price may lead to lower supply and a shortage. Minimum prices can increase the price producers receive.
A minimum price is a form of government intervention that prevents the price of a good or service from falling to low thus being unfair. The most common minimum price is the minimum wage–the minimum price that can be paid for labor. Minimum price or Price floors are also used often in agriculture to try to protect farmers.
Today you will learn to create price between min and max range slider. Basically, here is a range slider with two handles, using one you can choose the minimum value and using another you can select the maximum value. You also can put numbers in the text input fields, then the slider also will move.
You can implement this pretty easily if you use something like jQuery UI assuming you have a little knowledge of Javascript. Here is an example of what you can achieve. https://jqueryui.com/slider/#range
To see how it is implemented you can click 'View source' on that page or for quick reference I will leave it here.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Slider - Range slider</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#slider-range" ).slider({
range: true,
min: 0,
max: 500,
values: [ 75, 300 ],
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>
<p>
<label for="amount">Price range:</label>
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider-range"></div>
</body>
</html>
If you want an HTML version, you will need to look at the HTML5 sliders but browser support is limited. Here is a link if you would like some more information:
http://demosthenes.info/blog/757/Playing-With-The-HTML5-range-Slider-Input
133
answered Sep 19 '22 00:09
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With