Limit top and bottom of a slider

Question

I am working on a simple slider, yet I am facing trouble to make it stop when it reaches its limits.

So basically, I want the the lever element to stop in the top and bottom positions, even if the user tries to surpass it.

I would like to avoid anything other than pure JS and/or ECMA code.

Here's my small project:

s_Title.innerHTML = "mySlider";

dragSlider(document.getElementById("mySlider"));
var maxPos = document.getElementById("s_Groove").offsetTop - (s_Lever.offsetHeight/2);
var minPos = document.getElementById("s_Groove").offsetTop + document.getElementById("s_Groove").offsetHeight + (s_Lever.offsetHeight/2);

// Initialize SP value
document.getElementById("s_SP").innerHTML = s_Lever.offsetTop;

function dragSlider() {

    let start_Pos = 0;
    let final_Pos = 0;

    document.getElementById("s_Lever").onmousedown = dragMouseDown;

    function dragMouseDown(e) {

        e = e || window.event;
        e.preventDefault();

        // get the mouse cursor position at startup:
        start_Pos = e.clientY;
        document.onmouseup = closeDragElement;

        // call a function whenever the cursor moves:
        document.onmousemove = elementDrag;
    }
    
    function elementDrag(e) {
        document.getElementById("s_SP").innerHTML = e.clientY;

        e = e || window.event;
        e.preventDefault();

        // calculate the new cursor position:
        final_Pos = start_Pos - e.clientY;
        start_Pos = e.clientY;

        // set the element's new position:
        s_Lever.style.top = (s_Lever.offsetTop - final_Pos) + "px";

        if(s_Lever.style.top <= maxPos) {
            s_Lever.style.top = maxPos;
        }
        else if(s_Lever.style.top >= minPos) {
            s_Lever.style.top = minPos;
        }
    }
    
    function closeDragElement() {
        // stop moving when mouse button is released:
        document.onmouseup = null;
        document.onmousemove = null;
    }
}

body{
    position: absolute;

    left: 0px;
    top: 0px;

    border: 0px;
    margin: 0px;
    padding: 0px;

    background-color: #C0C0C0;
}

#mySlider{
    position: absolute;

    left: 50px;
    top: 50px;

    width: 100px;
    height: 500px;

    border: 2px solid black;
    border-left: 2px solid white;
    border-top: 2px solid white;
    border-radius: 10px;

    margin: 0px;
    padding: 0px;

    background-color: #C0C0C0;
}

#s_Title{
    position: absolute;

    left: 0px;
    left: 0px;
    top: 0px;

    width: 100px;
    height: 40px;

    border-Bottom: 2px solid black;

    margin: 0px;
    padding: 0px;

    background-color:transparent;

    font-family: Arial;
    font-size: 16px;
    text-align: center;
    line-height: 40px;
}

#s_Groove{
    position: absolute;

    left: 40px;
    top: 60px;

    width: 16px;
    height: 376px;

    border: 2px solid black;
    border-right: 2px solid white;
    border-bottom:2px solid white;

    margin: 0px;
    padding: 0px;

    background-color: #B0B0B0;
}

#s_Lever{
    position: absolute;

    left: 20px;
    top: 428px;

    width: 56px;
    height: 20px;

    border: 2px solid black;
    border-left: 2px solid white;
    border-top:2px solid white;

    margin: 0px;
    padding: 0px;

    background-color: #00FF0088;
}

#s_SP{
    position: absolute;

    left: 0px;
    top: 458px;

    width: 100px;
    height: 40px;

    border-top: 2px solid black;

    margin: 0px;
    padding: 0px;

    background-color: transparent;

    font-family: Arial;
    font-size: 16px;
    text-align: center;
    line-height: 40px;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="mySlider" content="Example of a slider">
        <meta name="keywords" content="slider">
        <meta name="author" content="J. V., Andrade">
        <meta name="viewport" contetn="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div id="mySlider">
            <div id="s_Title"></div>
            <div id="s_Groove"></div>
            <div id="s_Lever"></div>
            <div id="s_SP"></div>
        </div>

        <script type="text/javascript" src="script.js"></script>
    </body>
</html>

thanhdx · Accepted Answer

You went wrong with this:

if (s_Lever.style.top <= maxPos)...

s_Lever.style.top is a string (with "px"), maxPos is a number. You need to correct it and also add "px" to the assign style top inside that if command

sbgib · Answer

Try like this:

s_Title.innerHTML = "mySlider";

dragSlider(document.getElementById("mySlider"));
var maxPos = document.getElementById("s_Groove").offsetTop - (s_Lever.offsetHeight/2);
var minPos = document.getElementById("s_Groove").offsetTop + document.getElementById("s_Groove").offsetHeight - (s_Lever.offsetHeight/2);

// Initialize SP value
document.getElementById("s_SP").innerHTML = s_Lever.offsetTop;

function dragSlider() {

    let start_Pos = 0;
    let final_Pos = 0;

    document.getElementById("s_Lever").onmousedown = dragMouseDown;

    function dragMouseDown(e) {

        e = e || window.event;
        e.preventDefault();

        // get the mouse cursor position at startup:
        start_Pos = e.clientY;
        document.onmouseup = closeDragElement;

        // call a function whenever the cursor moves:
        document.onmousemove = elementDrag;
    }
    
    function elementDrag(e) {
        let new_Pos = 0;
        
        document.getElementById("s_SP").innerHTML = e.clientY;

        e = e || window.event;
        e.preventDefault();

        // calculate the new cursor position:
        final_Pos = start_Pos - e.clientY;
        start_Pos = e.clientY;
        new_Pos = s_Lever.offsetTop - final_Pos

        // set the element's new position:

        if(new_Pos <= maxPos) {
            s_Lever.style.top = maxPos + "px";
        }
        else if(new_Pos >= minPos) {
            s_Lever.style.top = minPos + "px";
        } else {
            s_Lever.style.top = new_Pos + "px";
        }
    }
    
    function closeDragElement() {
        // stop moving when mouse button is released:
        document.onmouseup = null;
        document.onmousemove = null;
    }
}

body{
    position: absolute;

    left: 0px;
    top: 0px;

    border: 0px;
    margin: 0px;
    padding: 0px;

    background-color: #C0C0C0;
}

#mySlider{
    position: absolute;

    left: 50px;
    top: 50px;

    width: 100px;
    height: 500px;

    border: 2px solid black;
    border-left: 2px solid white;
    border-top: 2px solid white;
    border-radius: 10px;

    margin: 0px;
    padding: 0px;

    background-color: #C0C0C0;
}

#s_Title{
    position: absolute;

    left: 0px;
    left: 0px;
    top: 0px;

    width: 100px;
    height: 40px;

    border-Bottom: 2px solid black;

    margin: 0px;
    padding: 0px;

    background-color:transparent;

    font-family: Arial;
    font-size: 16px;
    text-align: center;
    line-height: 40px;
}

#s_Groove{
    position: absolute;

    left: 40px;
    top: 60px;

    width: 16px;
    height: 376px;

    border: 2px solid black;
    border-right: 2px solid white;
    border-bottom:2px solid white;

    margin: 0px;
    padding: 0px;

    background-color: #B0B0B0;
}

#s_Lever{
    position: absolute;

    left: 20px;
    top: 428px;

    width: 56px;
    height: 20px;

    border: 2px solid black;
    border-left: 2px solid white;
    border-top:2px solid white;

    margin: 0px;
    padding: 0px;

    background-color: #00FF0088;
}

#s_SP{
    position: absolute;

    left: 0px;
    top: 458px;

    width: 100px;
    height: 40px;

    border-top: 2px solid black;

    margin: 0px;
    padding: 0px;

    background-color: transparent;

    font-family: Arial;
    font-size: 16px;
    text-align: center;
    line-height: 40px;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="mySlider" content="Example of a slider">
        <meta name="keywords" content="slider">
        <meta name="author" content="J. V., Andrade">
        <meta name="viewport" contetn="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div id="mySlider">
            <div id="s_Title"></div>
            <div id="s_Groove"></div>
            <div id="s_Lever"></div>
            <div id="s_SP"></div>
        </div>

        <script type="text/javascript" src="script.js"></script>
    </body>
</html>

A few tweaks were needed:

The definition of maxPos
The comparison logic needed to use a number instead of a string
When applying maxPos, the units also need to be included

Limit top and bottom of a slider

Tags:

javascript

html

css

Zuitlander

2 Answers

thanhdx

sbgib

Recent Activity

Donate For Us

Limit top and bottom of a slider

Tags:

javascript

html

css

Zuitlander

2 Answers

thanhdx

sbgib

Related questions

Recent Activity

Donate For Us