HTML5:可能有两个输入的滑块？
HTML5:可能有两个输入的滑块？
提问于 2011-01-21 07:41:41
是否可以使用两个输入值来制作HTML5滑块，例如选择价格范围？如果是这样，怎么做呢？
回答 4
Stack Overflow用户
回答已采纳
发布于 2011-01-21 08:28:32
不能，HTML5 range input只接受一个输入。我建议您使用类似于jQuery UI range slider的东西来完成这项任务。
Stack Overflow用户
发布于 2015-06-27 07:05:19
一段时间以来，我一直在寻找一个轻量级的、无依赖的dual slider (仅仅为了这个而引入jQuery似乎很疯狂)，但似乎并不多见。我最终对@Wildhoney's code做了一些修改，并且非常喜欢它。
function getVals(){
// Get slider values
var parent = this.parentNode;
var slides = parent.getElementsByTagName("input");
var slide1 = parseFloat( slides[0].value );
var slide2 = parseFloat( slides[1].value );
// Neither slider will clip the other, so make sure we determine which is larger
if( slide1 > slide2 ){ var tmp = slide2; slide2 = slide1; slide1 = tmp; }
var displayElement = parent.getElementsByClassName("rangeValues")[0];
displayElement.innerHTML = slide1 + " - " + slide2;
}
window.onload = function(){
// Initialize Sliders
var sliderSections = document.getElementsByClassName("range-slider");
for( var x = 0; x < sliderSections.length; x++ ){
var sliders = sliderSections[x].getElementsByTagName("input");
for( var y = 0; y < sliders.length; y++ ){
if( sliders[y].type ==="range" ){
sliders[y].oninput = getVals;
// Manually trigger event first time to display values
sliders[y].oninput();
}
}
}
} section.range-slider {
position: relative;
width: 200px;
height: 35px;
text-align: center;
}
section.range-slider input {
pointer-events: none;
position: absolute;
overflow: hidden;
left: 0;
top: 15px;
width: 200px;
outline: none;
height: 18px;
margin: 0;
padding: 0;
}
section.range-slider input::-webkit-slider-thumb {
pointer-events: all;
position: relative;
z-index: 1;
outline: 0;
}
section.range-slider input::-moz-range-thumb {
pointer-events: all;
position: relative;
z-index: 10;
-moz-appearance: none;
width: 9px;
}
section.range-slider input::-moz-range-track {
position: relative;
z-index: -1;
background-color: rgba(0, 0, 0, 1);
border: 0;
}
section.range-slider input:last-of-type::-moz-range-track {
-moz-appearance: none;
background: none transparent;
border: 0;
}
section.range-slider input[type=range]::-moz-focus-outer {
border: 0;
}<!-- This block can be reused as many times as needed -->
<section class="range-slider">
<span class="rangeValues"></span>
<input value="5" min="0" max="15" step="0.5" type="range">
<input value="10" min="0" max="15" step="0.5" type="range">
</section>
Stack Overflow用户
发布于 2017-02-27 22:52:35
来晚了，但是noUiSlider避免了jQuery-ui依赖，这是公认的答案所不具备的。它唯一的“警告”是IE支持的是IE9和更新版本，如果旧的IE对你来说是一个破坏因素。
它也是免费的，开源的，可以不受限制地在商业项目中使用。
安装:下载noUiSlider，将CSS和JS文件解压到站点文件系统中的某个位置，然后从head链接到CSS，从body链接到JS：
<!-- In <head> -->
<link href="nouislider.min.css" rel="stylesheet">
<!-- In <body> -->
<script src="nouislider.min.js"></script>示例用法:创建一个从0到100的滑块，并开始设置为20-80。
HTML：
<div id="slider">
</div>JS：
var slider = document.getElementById('slider');
noUiSlider.create(slider, {
start: [20, 80],
connect: true,
range: {
'min': 0,
'max': 100
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/4753946
复制相关文章
相似问题