限制滑块的顶部和底部

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.我想避免使用纯 JS 和/或 ECMA 代码以外的任何东西。

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="JV, 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>

Answer 1

You went wrong with this:你错了：

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

s_Lever.style.top is a string (with "px"), maxPos is a number. s_Lever.style.top是一个字符串（带有“px”）， maxPos是一个数字。 You need to correct it and also add "px" to the assign style top inside that if command您需要更正它，并将“px”添加到 if 命令中的指定样式顶部

Answer 2

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="JV, 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 maxPos的定义
The comparison logic needed to use a number instead of a string需要使用数字而不是字符串的比较逻辑
When applying maxPos , the units also need to be included应用maxPos ，还需要包括单位

限制滑块的顶部和底部

问题描述

2 个解决方案

解决方案1
2 2020-11-05 08:27:33

解决方案2
1 已采纳 2020-11-05 08:36:58

限制滑块的顶部和底部

问题描述

2 个解决方案

解决方案1 2 2020-11-05 08:27:33

解决方案2 1 已采纳 2020-11-05 08:36:58

解决方案1
2 2020-11-05 08:27:33

解决方案2
1 已采纳 2020-11-05 08:36:58