html - 合并两个输入范围
问题描述
我想合并两个输入范围可拖动的拇指并在它们重叠时停止拖动。我也想更改范围轨道颜色,但input::-moz-range-track
不工作。
这是我当前的代码。
.price-slider {
position: relative;
width: 420px;
margin: 0 auto 20px;
height: .8em;
text-align: center;
}
.price-slider input {
pointer-events: none;
position: absolute;
left: 0;
top: 15px;
width: 100%;
outline: none;
height: .8em;
margin: 0;
padding: 0;
border: 1px solid #aaa;
-webkit-appearance: none;
}
.price-slider input::-webkit-slider-thumb {
pointer-events: all;
position: relative;
z-index: 1;
outline: 0;
background-color: #1E86D2;
border: 1px solid #d3d3d3;
width: 1.2em;
height: 1.2em;
-webkit-appearance: none;
}
.price-slider input::-moz-range-thumb {
pointer-events: all;
position: relative;
z-index: 1;
outline: 0;
widows: 24px;
border-radius: 12px;
background-color: white;
border: 2px solid black;
-moz-appearance: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div class="price-slider">
<input type="range" min="0" #range1 value="0" max="100" step="1" (input)="range1.value" (mouseup)="stop(range1.value, range2.value)">
<input type="range" min="0" #range2 value="100" max="100" step="1" (input)="range2.value">
<label for=""> Range: {{ range2.value - range1.value }} </label>
</div>
希望有人会帮助我。先感谢您。
解决方案
推荐阅读
- javascript - 仅当使用打字稿的某些条件为真并做出反应时,如何将对象添加到数组中?
- python - 在第一级之后遍历 JSON 对象
- reactjs - 使用 reactjs 打开 Outlook 附加文件
- amazon-web-services - 如何在 Spring Boot 中连接 Amazon QLDB 数据库?
- python - MiniBatchKmeans 结果的实现问题
- r - 如何控制函数和数据框的参数数量
- php - PHP POST Curl 标头,如何将数组放入数组中?
- android - FlutterMain 的替代品是什么
- jquery - 如何使用 jQuery 使用 bootstrap 5 弹出框?
- pandas - 如何将 pandas 交叉表的输出数据帧从两个系列 x 和 y 展平为一个系列?