Javascript 在html中创建范围滑块_Javascript_Jquery_Html_Css

Javascript 在html中创建范围滑块

javascript jquery html css

Javascript 在html中创建范围滑块,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有一个显示一个值的范围滑块，但我希望显示两个限制，即最小值和最大值，类似于价格范围滑块，然后将最小值和最大值保存在数据库中，但目前我只有一个值有各种各样的滑块是通过js制作的，但我想知道这段代码是否可以修改为在单个滑块上同时具有max和min值（）您可以自己创建一个小部件总体思路：标记和脚本：在小部件的容器中有两个范围输入使用容器上的数据属性保存两个值，例如用于存储较低值的data lbound，以及用于存储较高值的data ubound 在范围输入的input事件上更新容器的数

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

有各种各样的滑块是通过js制作的，但我想知道这段代码是否可以修改为在单个滑块上同时具有max和min值（）

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

总体思路：

标记和脚本：
在小部件的容器中有两个范围输入
使用容器上的数据属性保存两个值，例如用于存储较低值的
```
data lbound
```
，以及用于存储较高值的
```
data ubound
```
在范围输入的
```
input
```
事件上更新容器的数据属性
使用这些数据属性可随时检索表单提交或任何其他用途所需的值
CSS:
使用绝对定位将两个量程输入放置在容器内彼此顶部
对范围输入进行样式化，使其拇指稍微向上移动，以便重叠的范围输入不会阻止其使用
如果需要，隐藏滑块/条/轨迹
在容器上创建一个
```
：：after
```
伪元素，其
```
内容
```
属性设置为容器的数据属性。这将用于显示当前范围
剩下的就是美化输入范围

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

小提琴：

片段：

.multi-range、.multi-range*{框大小：边框框；填充：0；边距：0；}
.多量程{
位置：相对；宽度：160px；高度：28px；边距：16px；
边框：1px实心#ddd；字体系列：单空格；
}
.multi-range>hr{位置：绝对；宽度：100%；顶部：50%；}
.多范围>输入[类型=范围]{
宽度：计算（100%-16px）；
位置：绝对；底部：6px；左侧：0；
}
.multi-range>input[type=range]：类型{margin left:16px；}的最后一个
.multi-range>input[type=range]：-webkit滑块thumb{transform:translateY（-18px）；}
.multi-range>input[type=range]：：-webkit滑块可运行轨迹{-webkit外观：无；高度：0px；}
.multi-range>input[type=range]：-moz-range thumb{transform:translateY（-18px）；}
.multi-range>input[type=range]：-moz-range轨迹{-webkit外观：无；高度：0px；}
.multi-range>input[type=range]：-ms thumb{transform:translateY（-18px）；}
.multi-range>input[type=range]：-ms track{-webkit外观：无；高度：0px；}
.multi-range:：在{
内容：attr（数据绑定）-”attr（数据绑定）；
位置：绝对；顶部：0；左侧：100%；空白：nowrap；
显示：块；填充：0px 4px；边距：-1px 2px；
高度：26px；宽度：自动；边框：1px实心#ddd；
字体大小：13px；行高：26px；
}

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

总体思路：

标记和脚本：
在小部件的容器中有两个范围输入
使用容器上的数据属性保存两个值，例如用于存储较低值的
```
data lbound
```
，以及用于存储较高值的
```
data ubound
```
在范围输入的
```
input
```
事件上更新容器的数据属性
使用这些数据属性可随时检索表单提交或任何其他用途所需的值
CSS:
使用绝对定位将两个量程输入放置在容器内彼此顶部
对范围输入进行样式化，使其拇指稍微向上移动，以便重叠的范围输入不会阻止其使用
如果需要，隐藏滑块/条/轨迹
在容器上创建一个
```
：：after
```
伪元素，其
```
内容
```
属性设置为容器的数据属性。这将用于显示当前范围
剩下的就是美化输入范围

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

小提琴：

片段：

.multi-range、.multi-range*{框大小：边框框；填充：0；边距：0；}
.多量程{
位置：相对；宽度：160px；高度：28px；边距：16px；
边框：1px实心#ddd；字体系列：单空格；
}
.multi-range>hr{位置：绝对；宽度：100%；顶部：50%；}
.多范围>输入[类型=范围]{
宽度：计算（100%-16px）；
位置：绝对；底部：6px；左侧：0；
}
.multi-range>input[type=range]：类型{margin left:16px；}的最后一个
.multi-range>input[type=range]：-webkit滑块thumb{transform:translateY（-18px）；}
.multi-range>input[type=range]：：-webkit滑块可运行轨迹{-webkit外观：无；高度：0px；}
.multi-range>input[type=range]：-moz-range thumb{transform:translateY（-18px）；}
.multi-range>input[type=range]：-moz-range轨迹{-webkit外观：无；高度：0px；}
.multi-range>input[type=range]：-ms thumb{transform:translateY（-18px）；}
.multi-range>input[type=range]：-ms track{-webkit外观：无；高度：0px；}
.multi-range:：在{
内容：attr（数据绑定）-”attr（数据绑定）；
位置：绝对；顶部：0；左侧：100%；空白：nowrap；
显示：块；填充：0px 4px；边距：-1px 2px；
高度：26px；宽度：自动；边框：1px实心#ddd；
字体大小：13px；行高：26px；
}

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