Html 带有最高和最低价格的价格栏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22043536/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
The price bar with max and min prices
提问by Ozan Atmar
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?
我怎样才能用 html 做到这一点？
Thanks in advance.
提前致谢。
回答by David Reid
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
如果您使用 jQuery UI 之类的东西，假设您对 Javascript 有一点了解，那么您可以很容易地实现这一点。这是您可以实现的目标的示例。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:
如果您需要 HTML 版本，则需要查看 HTML5 滑块，但浏览器支持有限。如果您想了解更多信息，请点击以下链接：
http://demosthenes.info/blog/757/Playing-With-The-HTML5-range-Slider-Input
http://demosthenes.info/blog/757/Playing-With-The-HTML5-range-Slider-Input
回答by moti
i read a tutorial it fits for you have a look
我读了一个适合你的教程看看
$(function() {
$( "#slider-range" ).slider({
range: true,
min: 0,
max: 500,
values: [ 100, 300 ],
slide: function( event, ui ) {
$( "#amount" ).html( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
$( "#amount1" ).val(ui.values[ 0 ]);
$( "#amount2" ).val(ui.values[ 1 ]);
}
});
$( "#amount" ).html( "$" + $( "#slider-range" ).slider( "values", 0 ) +
" - $" + $( "#slider-range" ).slider( "values", 1 ) );
});
complete tutorial here if you have any problem http://talkerscode.com/webtricks/price-range-slider-using-jquery-css-and-php.php
如果您有任何问题，请在此处完成教程http://talkerscode.com/webtricks/price-range-slider-using-jquery-css-and-php.php
回答by Sword I
You can try this. Its works for me.
你可以试试这个。它对我有用。
HTML
HTML
<input type="number" min="200" max="100" step="1" id="input-number">
<input type="number" min="200" max="1000" step="1" id="input-number">
JS
JS
var select = document.getElementById('input-select');
for ( var i = 200; i <= 1000; i++ ){
var option = document.createElement("option");
option.text = i;
option.value = i;
select.appendChild(option);
}
var html5Slider = document.getElementById('html5');
noUiSlider.create(html5Slider, {
start: [ 500, 800 ],
connect: true,
range: {
'min': 200,
'max': 1000
}
});
var inputNumber = document.getElementById('input-number');
html5Slider.noUiSlider.on('update', function( values, handle ) {
var value = values[handle];
if ( handle ) {
inputNumber.value = value;
} else {
select.value = Math.round(value);
}
});
select.addEventListener('change', function(){
html5Slider.noUiSlider.set([this.value, null]);
});
inputNumber.addEventListener('change', function(){
html5Slider.noUiSlider.set([null, this.value]);
});
Here is the live link: https://codepen.io/sifulislam/pen/YeYpdr
回答by Himabindu
Use two single sliders and render it as a double slider by hiding(use css and html).
使用两个单滑块并通过隐藏将其呈现为双滑块（使用 css 和 html）。
[slider] {
width: 300px;
position: relative;
height: 5px;
margin: 45px 0 10px 0;
}
[slider] > div {
position: absolute;
left: 13px;
right: 15px;
height: 5px;
}
[slider] > div > [inverse-left] {
position: absolute;
left: 0;
height: 5px;
border-radius: 10px;
background-color: #CCC;
margin: 0 7px;
}
[slider] > div > [inverse-right] {
position: absolute;
right: 0;
height: 5px;
border-radius: 10px;
background-color: #CCC;
margin: 0 7px;
}
[slider] > div > [range] {
position: absolute;
left: 0;
height: 5px;
border-radius: 14px;
background-color: #d02128;
}
[slider] > div > [thumb] {
position: absolute;
top: -7px;
z-index: 2;
height: 20px;
width: 20px;
text-align: left;
margin-left: -11px;
cursor: pointer;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
background-color: #FFF;
border-radius: 50%;
outline: none;
}
[slider] > input[type=range] {
position: absolute;
pointer-events: none;
-webkit-appearance: none;
z-index: 3;
height: 14px;
top: -2px;
width: 100%;
opacity: 0;
}
div[slider] > input[type=range]:focus::-webkit-slider-runnable-track {
background: transparent;
border: transparent;
}
div[slider] > input[type=range]:focus {
outline: none;
}
div[slider] > input[type=range]::-webkit-slider-thumb {
pointer-events: all;
width: 28px;
height: 28px;
border-radius: 0px;
border: 0 none;
background: red;
-webkit-appearance: none;
}
div[slider] > input[type=range]::-ms-fill-lower {
background: transparent;
border: 0 none;
}
div[slider] > input[type=range]::-ms-fill-upper {
background: transparent;
border: 0 none;
}
div[slider] > input[type=range]::-ms-tooltip {
display: none;
}
[slider] > div > [sign] {
opacity: 0;
position: absolute;
margin-left: -11px;
top: -39px;
z-index:3;
background-color: #d02128;
color: #fff;
width: 28px;
height: 28px;
border-radius: 28px;
-webkit-border-radius: 28px;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
text-align: center;
}
[slider] > div > [sign]:after {
position: absolute;
content: '';
left: 0;
border-radius: 16px;
top: 19px;
border-left: 14px solid transparent;
border-right: 14px solid transparent;
border-top-width: 16px;
border-top-style: solid;
border-top-color: #d02128;
}
[slider] > div > [sign] > span {
font-size: 12px;
font-weight: 700;
line-height: 28px;
}
[slider]:hover > div > [sign] {
opacity: 1;
}<div slider id="slider-distance">
<div>
<div inverse-left style="width:70%;"></div>
<div inverse-right style="width:70%;"></div>
<div range style="left:0%;right:0%;"></div>
<span thumb style="left:0%;"></span>
<span thumb style="left:100%;"></span>
<div sign style="left:0%;">
<span id="value">0</span>
</div>
<div sign style="left:100%;">
<span id="value">100</span>
</div>
</div>
<input type="range" value="0" max="100" min="0" step="1" oninput="
this.value=Math.min(this.value,this.parentNode.childNodes[5].value-1);
let value = (this.value/parseInt(this.max))*100
var children = this.parentNode.childNodes[1].childNodes;
children[1].style.width=value+'%';
children[5].style.left=value+'%';
children[7].style.left=value+'%';children[11].style.left=value+'%';
children[11].childNodes[1].innerHTML=this.value;" />
<input type="range" value="100" max="100" min="0" step="1" oninput="
this.value=Math.max(this.value,this.parentNode.childNodes[3].value-(-1));
let value = (this.value/parseInt(this.max))*100
var children = this.parentNode.childNodes[1].childNodes;
children[3].style.width=(100-value)+'%';
children[5].style.right=(100-value)+'%';
children[9].style.left=value+'%';children[13].style.left=value+'%';
children[13].childNodes[1].innerHTML=this.value;" />
</div>回答by Sebastien C.
Depending on the browsers you have to support, maybe you can use the range from HTML5 :
根据您必须支持的浏览器，也许您可以使用 HTML5 的范围：
<input type="range" min="10.50" max="50.00" step="0.50" />
You can also have a look at polyfills to support older browsers :
您还可以查看 polyfills 以支持旧浏览器：
https://github.com/fryn/html5slider
https://github.com/fryn/html5slider
