twitter-bootstrap 如何实现价格范围滑块
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43409658/
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
how to implement a price range slider
提问by Tee Famakin
I am implementing a range slider within the bootstrap template:
我正在引导程序模板中实现一个范围滑块：
<input type="range" name="range" step="50000" min="100000" max="1000000" value="" onchange="rangePrimary.value=value">
<input type="text" id="rangePrimary" />The range value is displayed in the text-field with id rangeprimary.
范围值显示在带有 id 的文本字段中rangeprimary。
I want to make this range slider work as a price range slider, where the lowest and highest ranges would be passed into two text-fields
我想让这个范围滑块用作价格范围滑块，其中最低和最高范围将被传递到两个文本字段
Most of the price range sliders I have seen don't work well with the template am using.
我见过的大多数价格范围滑块都不能很好地与我使用的模板配合使用。
回答by Andy Donegan
Ion Range Slider is an excellent option, requiring only Jquery. Very customizable and works excellently in Bootstrap. Also has excellent documentation.
离子范围滑块是一个很好的选择，只需要 Jquery。非常可定制并且在 Bootstrap 中运行良好。也有优秀的文档。
http://ionden.com/a/plugins/ion.rangeSlider/en.html
http://ionden.com/a/plugins/ion.rangeSlider/en.html
An example of a single slider implementing exactly what you require using this plugin is shown on the Basic Demo Page.
基本演示页面上显示了使用此插件完全实现您所需要的单个滑块的示例。
<input type="text" id="rangePrimary" name="rangePrimary" value="" />
<p id="priceRangeSelected"></P>
$("#rangePrimary").ionRangeSlider({
type: "double",
grid: true,
min: 0,
max: 1000,
from: 200,
to: 800,
prefix: "￡"
});
To then get the data from it you can do an Onchange Function example again from the web site.
要从中获取数据，您可以再次从网站上执行 Onchange 函数示例。
$("#rangePrimary").on("change", function () {
var $this = $(this),
value = $this.prop("value").split(";");
var minPrice = value[0];
var maxPrice = value[1];
$("#priceRangeSelected").text("Lower Price Range = ￡" + minPrice + " , Upper Price Range = ￡" + maxPrice);
});
This will update produce a message below the slider with the value selected on change of the sliders.
这将更新在滑块下方生成一条消息，其中包含更改滑块时选择的值。
回答by Aniket Jha
Here is a link to a price slider range.
这是价格滑块范围的链接。
1)Price Slider Shopping Carts(Visit this link)
1)价格滑块购物车（访问此链接）
HTML
HTML
<div id="rangeBox">
<div id="sliderBox">
<input type="range" id="slider0to50" step="5" min="0" max="50">
<input type="range" id="slider51to100" step="5" min="50" max="100">
</div>
<div id="inputRange">
<input type="number" step="5" min="0" max="50" placeholder="Min" id="min" >
<input type="number" step="5" min="51" max="100" placeholder="Max" id="max">
</div>
</div>
CSS
CSS
#rangeBox{ /* carry complete range box*/
width:300px;
height:100px;
}
#sliderBox{
position:relative;
top:0%;
width:300px; /*2x width*/
}
#slider0to50{
width:150px;/*1x width*/
position:absolute;
left:0%;
}
#slider51to100{
width:150px;/*1x width*/
position:absolute;
left:50%;
}
#inputRange{
position:relative;
top:50%;
}
#inputRange::after{
content:"";
clear:both;
display:block
}
#inputRange #min{
width:40%;
float:left;
}
#inputRange #max{
width:40%;
float:right;
}
JS
JS
var sliderLeft=document.getElementById("slider0to50");
var sliderRight=document.getElementById("slider51to100");
var inputMin=document.getElementById("min");
var inputMax=document.getElementById("max");
///value updation from input to slider
//function input update to slider
function sliderLeftInput(){//input udate slider left
sliderLeft.value=inputMin.value;
}
function sliderRightInput(){//input update slider right
sliderRight.value=(inputMax.value);//chnage in input max updated in slider right
}
//calling function on change of inputs to update in slider
inputMin.addEventListener("change",sliderLeftInput);
inputMax.addEventListener("change",sliderRightInput);
///value updation from slider to input
//functions to update from slider to inputs
function inputMinSliderLeft(){//slider update inputs
inputMin.value=sliderLeft.value;
}
function inputMaxSliderRight(){//slider update inputs
inputMax.value=sliderRight.value;
}
sliderLeft.addEventListener("change",inputMinSliderLeft);
sliderRight.addEventListener("change",inputMaxSliderRight);
回答by Giovanni Filannino
You can get the element from javascript and then give it the properties min and max getting them from the two textfields:
您可以从 javascript 获取元素，然后给它属性 min 和 max 从两个文本字段中获取它们：
var x = document.getElementById('rangePrimary');
x.min = the value you get from the first textfield
x.max = the value you
