在html中创建范围滑块 [英] create range slider in html
问题描述
我有一个显示一个值的范围滑块，但我希望显示2个限制，即最小值和最大值，类似于价格范围滑块，然后将最小值和最大值保存在数据库中，但目前我只有一个值。
I have a range slider that display the one value, but i wish to display 2 limits i.e min and max, something like a price range slider and then save the min and max value in database, but currently i have only one value.
有各种滑块通过js制作，但我想知道这段代码是否可以修改为在一个滑块上同时包含最大值和最小值（ @ fiddle ）
There are various sliders made through js, but i am wondering can this code be modified to have both max and min values on a single slider (@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>
推荐答案
您可以自己创建一个小部件。
You could create a widget yourself.
广义：
- 标记和Javscript：
- Markup and Javscript:
- 在小部件的容器中有两个范围输入
- 使用容器上的数据属性来保存两个价值，例如
data-lbound用于存储较低的值，data-ubound用于存储较高的值 - 在
输入范围输入事件中更新容器的数据属性 - 使用这些数据属性检索值表格提交或任何其他用途所需的任何时间
- Have two range inputs inside a container for the widget
- Use data attributes on the container to hold the two values e.g.
data-lboundfor storing the lower value anddata-uboundto store the higher value - Update the data attributes of the container on
inputevent of the range inputs - Use these data attributes to retrieve the values any time required for form submission or any other use
- 使用绝对定位将两个范围输入放在容器内的彼此顶部
- 设置范围输入的样式以使其拇指向上移动一点，以便重叠范围输入不会阻止其使用
- 如果需要，隐藏滑块/条/轨道
- 创建容器上的
:: after伪元素，其内容属性设置为容器的数据属性。这将用于显示当前范围。 - 休息就是美化范围输入。
- Use absolute positioning to position the two range inputs on top of each other inside the container
- Stylize the range inputs to have their thumbs moved a little above so that overlapped range inputs do not prevent their usage
- If required, hide the slider/bar/track
- Create an
::afterpseudo-element on the container with itscontentproperty set to the data attributes of the container. This will be used to display the current ranges. - Rest is all about beautifying the ranges inputs.
这是我创建的一个小型演示。 （使用Chrome或Firefox进行测试）也可以使用键盘。
Here is a small demo that I created. (Test it out with Chrome or Firefox) Works with keyboard as well.
小提琴： http://jsfiddle.net/abhitalks/a1f1k8d0/2/
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。
这篇关于在html中创建范围滑块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
