问题描述
我正在研究双范围滑块，我使用 CSS 将两个范围滑块组合成一个范围滑块。代码按预期工作，但如果两个滑块之间的间隙等于 5（类似于 this），我想阻止滑块移动。
目前，如果间隙等于 5，我的代码会阻止左侧滑块向前移动，但我可以将右侧滑块向左移动，这是意料之外的。
代码如下：
window.onload=()=>slide();
/*display values based on range*/
function slide(){
let displayValue_left=document.getElementById('range1');
let displayValue_right=document.getElementById('range2');
let slideValue_left = document.getElementById("slider1");
let slideValue_right = document.getElementById("slider2");
//Check if difference of left and right slider is less than or equal to 5
if(parseInt(slideValue_right.value)-parseInt(slideValue_left.value)<=5){
//if yes then set left slider value to value of right slider-5
slideValue_left.value=slideValue_right.value-5;
//if left slider value=0 right slider value = 5(to maintain gap)
if(parseInt(slideValue_left.value)==0){
document.getElementById("slider2").value=parseInt(slideValue_left.value)+5;
}
}
document.getElementById('range1').innerText=slideValue_left.value;
document.getElementById('range2').innerText=slideValue_right.value;
}*,*:before,*:after{
padding: 0;
margin: 0;
Box-sizing: border-Box;
}
body{
height: 100vh;
display: grid;
place-items: center;
}
.container{
width: 95vmin;
height: 67.5vmin;
position: relative;
overflow: hidden;
background-color: white;
}
#slider1,#slider2{
-webkit-appearance: none;
width: 100%;
height: 50%;
outline: none;
position: absolute;
background-color: transparent;
/*Ignore Mouse pointer/Don't respond to mouse pointer event*/
pointer-events: none;
}
/*
Styling the track(range line)
*/
input[type=range]::-webkit-slider-runnable-track {
-webkit-appearance: none;
background-color: red;
height: 2px;
}
input[type=range]::-moz-range-track{
-moz-appearance: none;
background-color: red;
height: 2px;
}
input[type=range]::-ms-track{
appearance: none;
background-color: red;
height: 2px;
}
/*
Styling for Thumb
*/
input[type="range"]::-webkit-slider-thumb{
-webkit-appearance: none;
height: 1em;
width: 1em;
cursor: pointer;
border-radius: 10px;
background: rgba(255,0.6);
border: 0;
border-radius: 50%;
margin-top: -5px;
/*Respond to pointer event*/
pointer-events: auto;
}
input[type="range"]::-moz-range-thumb{
-webkit-appearance: none;
height: 1em;
width: 1em;
cursor: pointer;
border-radius: 10px;
background: rgba(255,0.6);
border: 0;
border-radius: 50%;
pointer-events: auto;
}
input[type="range"]::-ms-thumb{
appearance: none;
height: 1em;
width: 1em;
cursor: pointer;
border-radius: 10px;
background: rgba(255,0.6);
border: 0;
border-radius: 50%;
pointer-events: auto;
}<!DOCTYPE html>
<html lang="en">
<head>
<Meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Double Range Slider</title>
</head>
<body>
<div class="container">
<input type="range" min="0" max="100" value="0" oninput="slide()" id="slider1">
<input type="range" min="0" max="100" value="10" oninput="slide()" id="slider2">
<div id="values">
<div>
Range1:
<span id="range1"></span>
</div>
<div>
Range2:
<span id="range2"></span>
</div>
</div>
</div>
</body>
</html>解决方法
我自己解决了这个问题，方法是为左、右滑块创建单独的函数并检查两个函数中的相同条件。想在这里回答一下，以便人们以后可以参考。
window.onload=()=>{
slideleft()
slideright()
}
let displayValue_left=document.getElementById('range1');
let slideValue_left = document.getElementById("slider1");
let displayValue_right=document.getElementById('range2');
let slideValue_right = document.getElementById("slider2");
// For left slider
function slideleft(){
//Check if difference of left and right slider is less than or equal to 5
if(parseInt(slideValue_right.value)-parseInt(slideValue_left.value)<=5){
//if yes then set left slider value to value of right slider-5
slideValue_left.value=parseInt(slideValue_right.value)-5;
}
displayValue_left.innerText=slideValue_left.value;
}
//For right slider
function slideright(){
//Check if difference of left and right slider is less than or equal to 5
if(parseInt(slideValue_right.value)-parseInt(slideValue_left.value)<=5){
//if yes then set right slider value to value of left slider+5
slideValue_right.value=parseInt(slideValue_left.value)+5;
}
displayValue_right.innerText=slideValue_right.value;
}*,*:before,*:after{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
height: 100vh;
display: grid;
place-items: center;
}
.container{
width: 95vmin;
height: 67.5vmin;
position: relative;
overflow: hidden;
background-color: white;
}
#slider1,#slider2{
-webkit-appearance: none;
width: 100%;
height: 50%;
outline: none;
position: absolute;
background-color: transparent;
/*Ignore Mouse pointer/Don't respond to mouse pointer event*/
pointer-events: none;
}
input[type=range]::-webkit-slider-runnable-track {
-webkit-appearance: none;
background-color: red;
height: 2px;
}
input[type=range]::-moz-range-track{
-moz-appearance: none;
background-color: red;
height: 2px;
}
input[type=range]::-ms-track{
appearance: none;
background-color: red;
height: 2px;
}
/*
Styling for Thumb
*/
input[type="range"]::-webkit-slider-thumb{
-webkit-appearance: none;
height: 1em;
width: 1em;
cursor: pointer;
border-radius: 10px;
background: rgba(255,0.6);
border: 0;
border-radius: 50%;
margin-top: -5px;
/*Respond to pointer event*/
pointer-events: auto;
}
input[type="range"]::-moz-range-thumb{
-webkit-appearance: none;
height: 1em;
width: 1em;
cursor: pointer;
border-radius: 10px;
background: rgba(255,0.6);
border: 0;
border-radius: 50%;
pointer-events: auto;
}
input[type="range"]::-ms-thumb{
appearance: none;
height: 1em;
width: 1em;
cursor: pointer;
border-radius: 10px;
background: rgba(255,0.6);
border: 0;
border-radius: 50%;
pointer-events: auto;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Double Range Slider</title>
</head>
<body>
<div class="container">
<input type="range" min="0" max="100" value="0" oninput="slideleft()" id="slider1">
<input type="range" min="0" max="100" value="10" oninput="slideright()" id="slider2">
<div id="values">
<div>
Range1:
<span id="range1"></span>
</div>
<div>
Range2:
<span id="range2"></span>
</div>
</div>
</div>
</body>
</html>