我想创建一个两个按钮滑块并将样式应用于相同的滑块。我已经创建了滑块,但无法设置滑块的样式。
这就是我需要的
这就是我所做的
我无法使用 CSS 设置滑块样式。
这是我做的。但无法将两个滑块合二为一。想要找到一种方法将它们组合成一个滑块,作为我附加的示例。
.slider {
display: flex;
background-color: white;
color: green;
}
<div class="slider">
<input type="range">
<input type="range">
</div>
试试这个。希望这对你有帮助。你可以调整任何你想要的。 我正在添加它的屏幕截图。
这是完整的代码。
.range_container {
display: flex;
flex-direction: column;
width: 80%;
margin: 35% auto;
}
.sliders_control {
position: relative;
min-height: 50px;
}
.form_control {
position: relative;
display: flex;
justify-content: space-between;
font-size: 24px;
color: #635a5a;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
pointer-events: all;
width: 24px;
height: 24px;
background-color: #fff;
border-radius: 50%;
box-shadow: 0 0 0 1px #C6C6C6;
cursor: pointer;
}
input[type=range]::-moz-range-thumb {
-webkit-appearance: none;
pointer-events: all;
width: 24px;
height: 24px;
background-color: #fff;
border-radius: 50%;
box-shadow: 0 0 0 1px #C6C6C6;
cursor: pointer;
}
input[type=range]::-webkit-slider-thumb:hover {
background: #f7f7f7;
}
input[type=range]::-webkit-slider-thumb:active {
box-shadow: inset 0 0 3px #387bbe, 0 0 9px #387bbe;
-webkit-box-shadow: inset 0 0 3px #387bbe, 0 0 9px #387bbe;
}
input[type="range"] {
-webkit-appearance: none;
appearance: none;
height: 10px;
width: 100%;
position: absolute;
background-color: #f79847;
pointer-events: none;
}
#fromSlider {
height: 0;
z-index: 1;
top: 5px;
}
<div class="range_container">
<div class="sliders_control">
<input id="fromSlider" type="range" value="10" min="0" max="100" />
<input id="toSlider" type="range" value="40" min="0" max="100" />
</div>
</div>