在html中创建范围滑块

我有一个范围滑块，显示一个值，但我希望显示2个限制，即最小和最大，就像价格范围滑块，然后将最小值和最大值保存在数据库中，但目前我只有一个价值。在html中创建范围滑块

有通过JS做出各种滑块，但我想知道可以将此代码进行修改，以在单个滑块（@fiddle）

<body> 
    <form> 
     <input type="range" name="amountRange" min="0" max="20" value="0" oninput="this.form.amountInput.value=this.value" /> 
     <input type="number" name="amountInput" min="0" max="20" value="0" oninput="this.form.amountRange.value=this.value" /> 
    </form> 
</body>

来源

2015-10-30 lyra

您可以创建自己的控件同时具有最大值和最小值。

广泛的思路：

标记和Javscript：
1. 具有容器内的两个范围的输入的窗口小部件在容器上
2. 使用数据属性例如保持两个值data-lbound用于存储下限值和data-ubound存储较高值
3. 更新所述容器的上input事件的范围的输入
4. 使用这些数据的数据属性的属性来检索值表单提交或任何其他所需的任何时间使用
CSS：
1. 使用绝对定位在彼此的顶部的两个范围的输入的位置的容器内
2. 风格化的范围内输入有他们大拇指移动上述一点点，使得重叠范围的输入不妨碍它们的使用
3. 如果需要，隐藏滑块/酒吧/轨道
4. 上创建::after伪元素容器的content属性设置为容器的数据属性。这将用于显示当前范围。
5. 其余的都是关于美化范围输入。

这里是我创建了一个小的演示。（使用Chrome或Firefox进行测试）也适用于键盘。

小提琴：http://jsfiddle.net/abhitalks/a1f1k8d0/2/

段：

.multi-range, .multi-range * { box-sizing: border-box; padding: 0; margin: 0; } 
 
.multi-range { 
 
    position: relative; width: 160px; height: 28px; margin: 16px; 
 
    border: 1px solid #ddd; font-family: monospace; 
 
} 
 
.multi-range > hr { position: absolute; width: 100%; top: 50%; } 
 
.multi-range > input[type=range] { 
 
    width: calc(100% - 16px); 
 
    position: absolute; bottom: 6px; left: 0; 
 
} 
 
.multi-range > input[type=range]:last-of-type { margin-left: 16px; } 
 
.multi-range > input[type=range]::-webkit-slider-thumb { transform: translateY(-18px); } 
 
.multi-range > input[type=range]::-webkit-slider-runnable-track { -webkit-appearance: none; height: 0px; } 
 
.multi-range > input[type=range]::-moz-range-thumb { transform: translateY(-18px); } 
 
.multi-range > input[type=range]::-moz-range-track { -webkit-appearance: none; height: 0px; } 
 
.multi-range > input[type=range]::-ms-thumb { transform: translateY(-18px); } 
 
.multi-range > input[type=range]::-ms-track { -webkit-appearance: none; height: 0px; } 
 
.multi-range::after { 
 
    content: attr(data-lbound) ' - ' attr(data-ubound); 
 
    position: absolute; top: 0; left: 100%; white-space: nowrap; 
 
    display: block; padding: 0px 4px; margin: -1px 2px; 
 
    height: 26px; width: auto; border: 1px solid #ddd; 
 
    font-size: 13px; line-height: 26px; 
 
}

<div class='multi-range' data-lbound='10' data-ubound='50'> 
 
    <hr /> 
 
    <input type='range' 
 
      min='10' max='45' step='5' value='10' 
 
      oninput='this.parentNode.dataset.lbound=this.value;' 
 
    /> 
 
    <input type='range' 
 
      min='15' max='50' step='5' value='50' 
 
      oninput='this.parentNode.dataset.ubound=this.value;' 
 
    /> 
 
</div>

注：前面的演示是很好，只是一个演示。它可以在Chrome和Firefox中完美工作，但我无法在IE/Edge中测试它。我的感觉是IE/Edge会有问题，因为滑块的大拇指与这些浏览器中的轨道内联。您可以进一步自定义和风格化它以使用IE/Edge。

来源

2015-10-30 09:20:17 Abhitalks

在html中创建范围滑块

回答

相关问题