Question

我有一个显示一个值的范围滑块，但我希望显示2个限制，即最小值和最大值，类似于价格范围滑块，然后将最小值和最大值保存在数据库中，但目前我只有一个值

有各种滑块通过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>

Answer 1

您可以自己创建一个小部件。

广泛的想法：

标记和Javscript：
1. 在小部件的容器中有两个范围输入
2. 使用容器上的数据属性来保存两个值，例如data-lbound用于存储较低的值，data-ubound用于存储较高的值
3. 在范围输入的input事件
4. 使用这些数据属性可以在表单提交或任何其他用途所需的任何时间检索值
的 CSS：

使用绝对定位将两个范围输入定位在容器内的彼此顶部

对范围输入进行样式化，使其拇指移动一点，以便重叠范围输入不会阻止其使用

如果需要，隐藏滑块/条/轨道

在容器上创建一个::after伪元素，其content属性设置为容器的数据属性。这将用于显示当前范围。

休息就是美化范围输入。

这是我创建的一个小型演示。（使用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。

在html中创建范围滑块

1 个答案: