我正在创建一个多范围滑块，使用2个滑块并使它们彼此重叠。
我已经成功创建了它并在Chrome和Mozilla中支持了它，但是我似乎无法支持Edge。
样式在SCSS中。
<!DOCTYPE html>
<html lang="en">
<head>
<style lang="scss">
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.item-value {
display: flex;
position: relative;
width: 100%;
height: 20px;
display: flex;
align-items: center;
&::before {
content: '';
height: 5px;
background: #000;
width: 100%;
background: #ddd;
border-radius: 3px;
}
.min-range, .max-range {
height: 25px;
width: 100%;
margin: 0;
padding: 0;
border: 0;
outline: none;
background: transparent;
-webkit-appearance: none;
-moz-appearance: none;
pointer-events: none; // Prevent mouse interaction on the range slider.
position: absolute;
/* For Webkit Browsers (Chrome) */
&::-webkit-slider-runnable-track {
cursor: default;
height: 5px;
outline: 0;
appearance: none;
background: #ddd;
border-radius: 3px;
position: relative;
}
&::-webkit-slider-thumb {
-webkit-appearance: none;
pointer-events: all;
background: $red;
width: 25px;
height: 25px;
border-radius: 50%;
top: -10px;
position: absolute;
z-index: 10;
cursor: pointer;
}
/* For Mozilla Browsers */
&::-moz-range-track {
opacity: 0;
pointer-events: none;
}
&::-moz-range-thumb {
-webkit-appearance: none;
pointer-events: all;
background: $red;
width: 25px;
height: 25px;
border-radius: 50%;
top: -5px;
position: absolute;
z-index: 10;
cursor: pointer;
border: 0;
}
/* For Edge Browsers */
&::-ms-track {
pointer-events: all;
}
&::-ms-thumb {
border: none;
height: 25px;
width: 25px;
border-radius: 50%;
background: $red;
pointer-events: all;
}
&::-ms-tooltip {
display: none;
pointer-events: all;
}
}
}
}
</style>
</head>
<body>
<section class="item-value">
<input type="range" value="10" class="min-range">
<input type="range" value="10" class="max-range">
</section>
</body>
</html>
在＆::-ms-thumb {}中，指针事件：all;不起作用，
我希望它重新启用指针事件，以便可以再次使用句柄，这与＆::-webkit-slider-thumb {}和＆::-moz-range-thumb {}
一起发生答案 0 :(得分：0)
添加相同的html和css代码以使其在此处可运行
<!DOCTYPE html>
<html lang="en">
<head>
<style lang="scss">
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.item-value {
display: flex;
position: relative;
width: 100%;
height: 20px;
display: flex;
align-items: center;
&::before {
content: '';
height: 5px;
background: #000;
width: 100%;
background: #ddd;
border-radius: 3px;
}
.min-range, .max-range {
height: 25px;
width: 100%;
margin: 0;
padding: 0;
border: 0;
outline: none;
background: transparent;
-webkit-appearance: none;
-moz-appearance: none;
pointer-events: none; // Prevent mouse interaction on the range slider.
position: absolute;
/* For Webkit Browsers (Chrome) */
&::-webkit-slider-runnable-track {
cursor: default;
height: 5px;
outline: 0;
appearance: none;
background: #ddd;
border-radius: 3px;
position: relative;
}
&::-webkit-slider-thumb {
-webkit-appearance: none;
pointer-events: all;
background: $red;
width: 25px;
height: 25px;
border-radius: 50%;
top: -10px;
position: absolute;
z-index: 10;
cursor: pointer;
}
/* For Mozilla Browsers */
&::-moz-range-track {
opacity: 0;
pointer-events: none;
}
&::-moz-range-thumb {
-webkit-appearance: none;
pointer-events: all;
background: $red;
width: 25px;
height: 25px;
border-radius: 50%;
top: -5px;
position: absolute;
z-index: 10;
cursor: pointer;
border: 0;
}
/* For Edge Browsers */
&::-ms-track {
pointer-events: all;
}
&::-ms-thumb {
border: none;
height: 25px;
width: 25px;
border-radius: 50%;
background: $red;
pointer-events: all;
}
&::-ms-tooltip {
display: none;
pointer-events: all;
}
}
}
}
</style>
</head>
<body>
<section class="item-value">
<input type="range" value="10" class="min-range">
<input type="range" value="10" class="max-range">
</section>
</body>
</html>