HTML5：有两个input的滑块可能吗？
是否有可能使两个input值的HTML5滑块，例如select一个价格范围？ 如果是这样，怎么办？
不， HTML5范围input只接受一个input。 我build议你使用类似jQuery UI范围滑块的任务。
我一直在寻找一个轻量级，无依赖关系的双滑块（为了这个目的，导入jQuery似乎很疯狂），而且似乎并没有太多的东西。 我最终修改了@ Wildhoney的代码 ，真的很喜欢它。
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>
来得晚，但是没有UiSlider避免了jQuery-ui的依赖，而接受的答案却没有。 其唯一的“警告”是IE支持IE9和更新，如果遗留的IE是一个交易断路器给你。
它也是免费的，开源的，可以在商业项目中使用，没有任何限制。
安装：下载noUlSlider，将CSS和JS文件解压到站点文件系统的某个位置，然后从头部链接到CSS，从正文链接到JS：
<!-- In <head> --> <link href="nouislider.min.css" rel="stylesheet"> <!-- In <body> --> <script src="nouislider.min.js"></script>
用法示例：创build一个从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 } });
当然，你可以简单地使用两个滑块互相叠加，并添加一些JavaScript（实际上不超过5行），select器不超过最小/最大值（如@Garys）的解决scheme。
附上你会发现从当前项目改编的短片段，包括一些CSS3样式，以显示你可以做什么（仅webkit）。 我还添加了一些标签来显示选定的值。
它使用JQuery，但是vanillajs版本并不是什么魔术。
(function() { function addSeperator(nStr) { nStr += ''; var x = nStr.split('.'); var x1 = x[0]; var x2 = x.length > 1 ? '.' + x[1] : ''; var rgx = /(\d+)(\d{3})/; while (rgx.test(x1)) { x1 = x1.replace(rgx, '$1' + '.' + '$2'); } return x1 + x2; } function rangeInputChangeEventHandler(e){ var rangeGroup = $(this).attr('name'), minBtn = $(this).parent().children('.min'), maxBtn = $(this).parent().children('.max'), range_min = $(this).parent().children('.range_min'), range_max = $(this).parent().children('.range_max'), minVal = parseInt($(minBtn).val()), maxVal = parseInt($(maxBtn).val()), origin = $(this).context.className; if(origin === 'min' && minVal > maxVal-5){ $(minBtn).val(maxVal-5); } var minVal = parseInt($(minBtn).val()); $(range_min).html(addSeperator(minVal*1000) + ' €'); if(origin === 'max' && maxVal-5 < minVal){ $(maxBtn).val(5+ minVal); } var maxVal = parseInt($(maxBtn).val()); $(range_max).html(addSeperator(maxVal*1000) + ' €'); } $('input[type="range"]').on( 'input', rangeInputChangeEventHandler); })();
body{ font-family: sans-serif; font-size:14px; } input[type='range'] { width: 210px; height: 30px; overflow: hidden; cursor: pointer; outline: none; } input[type='range'], input[type='range']::-webkit-slider-runnable-track, input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; background: none; } input[type='range']::-webkit-slider-runnable-track { width: 200px; height: 1px; background: #003D7C; } input[type='range']:nth-child(2)::-webkit-slider-runnable-track{ background: none; } input[type='range']::-webkit-slider-thumb { position: relative; height: 15px; width: 15px; margin-top: -7px; background: #fff; border: 1px solid #003D7C; border-radius: 25px; z-index: 1; } input[type='range']:nth-child(1)::-webkit-slider-thumb{ z-index: 2; } .rangeslider{ position: relative; height: 60px; width: 210px; display: inline-block; margin-top: -5px; margin-left: 20px; } .rangeslider input{ position: absolute; } .rangeslider{ position: absolute; } .rangeslider span{ position: absolute; margin-top: 30px; left: 0; } .rangeslider .right{ position: relative; float: right; margin-right: -5px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <div class="rangeslider"> <input class="min" name="range_1" type="range" min="1" max="100" value="10" /> <input class="max" name="range_1" type="range" min="1" max="100" value="90" /> <span class="range_min light left">10.000 €</span> <span class="range_max light right">90.000 €</span> </div>
