限制容器內的元素來創建一個JavaScript滑塊

Question

我想創建一個純jQuery版本的jQuery滑塊控件。

我不知道這是否是採取正確的做法，但這裏是我到目前爲止有：

http://jsfiddle.net/tharmer/xU35P/65/

document.getElementById("my-bar").addEventListener("mousedown", mouseDown, false); 
window.addEventListener('mouseup', mouseUp, false); 

function mouseUp() 
{ 
    window.removeEventListener('mousemove', divMove, true); 
} 

function mouseDown(e){ 
window.addEventListener('mousemove', divMove, true); 
} 

function divMove(e){ 
    document.getElementById('my-bar').style.left = (e.clientX) + 'px'; 
    //document.getElementById('my-slider').style.overflow = absolute; 
    //var coOrds = document.getElementById('my-coords').innerHTML=(offSetX); 

} 

是否有可能以較淡的灰色約束深灰色條酒吧，所以它不會超過邊緣？

這是處理此任務的好方法嗎？

Answer 1

當然，這不是一個壞主意。你只需要添加一個if語句來檢查的範圍，也從計算減去欄的寬度

function divMove(e){ 
    if(e.clientX < parent.offsetLeft + parent.clientWidth // Upper bounds 
     && e.clientX >= parent.offsetLeft) // Lower bounds 
     document.getElementById('my-bar').style.left = 
              (e.clientX - bar.clientWidth) + 'px'; 
} 

Demo

它總體上是好的做法，以節省元素變量的可讀性和可重用性

在附註中，HTML5引入了一個新的range type爲input，您可能會對現代瀏覽器感興趣