文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何在某个点停止这个双范围滑块？

问如何在某个点停止这个双范围滑块？
EN

Stack Overflow用户
提问于 2021-05-26 16:17:45
回答 1查看 269关注 0票数 0

我正在做一个双范围滑块，我使用CSS将两个范围滑块组合成一个单一的范围滑块。代码按预期工作，但如果两个滑块之间的间距等于5(类似于this)，我希望停止滑块的移动。

目前，如果间距等于5，我的代码会阻止左侧滑块向前移动，但我可以将右侧滑块向左移动，这不是我们所期望的。

代码如下：

​

代码语言：javascript
复制
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; 
}
代码语言：javascript
复制
*,
  *: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,0,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,0,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,0,0.6);
    border: 0;
    border-radius: 50%;
    pointer-events: auto;
}
代码语言：javascript
复制
<!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>

​

html
css
slider
javascript
EN

回答 1

Stack Overflow用户

发布于 2021-05-26 19:46:37

我自己解决了这个问题，为左，右滑块创建了不同的函数，并检查两个函数中是否有相同的条件。我想在这里回答，以便人们以后可以参考它。

​

代码语言：javascript
复制
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;
}
代码语言：javascript
复制
*,
*: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,0,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,0,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,0,0.6);
    border: 0;
    border-radius: 50%;
    pointer-events: auto;
}
代码语言：javascript
复制
<!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>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/67701087

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档