在html中创建范围滑块

create range slider in html

本文关键字：范围 创建 html      更新时间：2023-09-26

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

通过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>

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

总体思路：

  • 标记和Javscript:
    1. 在小部件的容器中有两个范围输入
    2. 使用容器上的数据属性来保存两个值，例如data-lbound用于存储较低的值，data-ubound用于存储较高的值
    3. 在范围输入的input事件上更新容器的数据属性
    4. 使用这些数据属性可以在表单提交或任何其他用途所需的任何时间检索值
  • CSS:
    1. 使用绝对定位将两个量程输入放置在容器内的顶部
    2. 设置范围输入的样式，使其拇指向上移动一点，这样重叠的范围输入就不会妨碍其使用
    3. 如果需要，隐藏滑块/条/轨迹
    4. 在容器上创建一个::after伪元素，其content属性设置为容器的数据属性。这将用于显示当前范围
    5. 休息就是美化范围输入

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

Fiddle：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

相关文章：