如何通过css样式合并两个输入类型=范围？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何通过css样式合并两个输入类型=范围？相关的知识，希望对你有一定的参考价值。
我有两个输入type =“range”。我想合并这两个。
我想制作双滑块，但是，如果我将两个元素放在另一个上面，只有顶部的一个接受鼠标点击。我不想使用任何外部库来做到这一点。我是用css风格做的，但主要的问题是它在Mozilla浏览器和IE中不起作用。它只适用于chrome浏览器，我认为这是因为指针事件：无;它没有在Mozilla浏览器中运行。任何的想法？
**css :**
.price-slider {
position: relative;
width: 400px;
margin: 0 auto 20px;
height: 35px;
text-align: center;
}
.price-slider input {
pointer-events: none;
position: absolute;
left: 0;
top: 15px;
width: 100%;
outline: none;
height: 18px;
margin: 0;
padding: 0;
border-radius: 8px;
}
.price-slider input::-webkit-slider-thumb {
pointer-events: all;
position: relative;
z-index: 1;
outline: 0;
height: 24px;
widows: 24px;
border-radius: 12px;
background-color: white;
border: 2px solid black;
-webkit-appearance: none;
}
**html:**
<div class="price-slider">
<input value="0" min="0" value="0" max="100" step="1" type="range" />
<input value="100" min="0" value="100" max="100" step="1" type="range" />
</div>
答案
这应该可以解决你的问题但是为了获取信息，pointer-events属性也可以在firefox中运行，没有任何前缀。
.price-slider {
position: relative;
width: 400px;
margin: 0 auto 20px;
height: 35px;
text-align: center;
}
.price-slider input {
pointer-events: none;
position: absolute;
left: 0;
top: 15px;
width: 100%;
outline: none;
height: 18px;
margin: 0;
padding: 0;
border-radius: 8px;
}
.price-slider input::-webkit-slider-thumb {
pointer-events: all;
position: relative;
z-index: 1;
outline: 0;
height: 24px;
widows: 24px;
border-radius: 12px;
background-color: white;
border: 2px solid black;
-webkit-appearance: none;
}
.price-slider input::-moz-range-thumb {
pointer-events: all;
position: relative;
z-index: 1;
outline: 0;
height: 24px;
widows: 24px;
border-radius: 12px;
background-color: white;
border: 2px solid black;
-moz-appearance: none;
}
input::-moz-range-track {
background: #ccc;
}<div class="price-slider">
<input value="0" min="0" value="0" max="100" step="1" type="range">
<input value="100" min="0" value="100" max="100" step="1" type="range">
</div>以上是关于如何通过css样式合并两个输入类型=范围？的主要内容，如果未能解决你的问题，请参考以下文章