Javascript垂直滑块

我正在尝试用javascript创建一个垂直滑块小部件。我不是在寻找任何插件或库，我只是想看看如何使用纯javascript实现。我想我大概知道了

请参阅此处了解到目前为止开发的内容，并查看源代码以查看代码，请在chrome中打开链接

问题：

1） 有时，当我将滑块移动到最顶部或最底部时，边界范围（例如：0，500）无法正确计算

2） 有时，当我释放鼠标（mouseup）时，滑块不会释放，即使在mouseup之后，滑块也会随着鼠标移动

---

3） 我只需要使用javascript就可以使代码更健壮、更流畅。

就完成了。非常感谢你的帮助

这是HTML

    Minimum Value: <input id="minimum-value" type="text" value="0" /> <br/>
Maximum Value: <input id="maximum-value" type="text" value="500" /> <br/>
<input id="submit-value" type="submit" value="Submit" /> <br/>
Slider Value: <span id="sliderValue"></span> <br/> 
<div id="slider-container">
    <div id="slider-bar"></div>
    <div id="slider-handle"></div>
</div>

这是js

    (function () {
    // html elements
    var container = document.getElementById("slider-container");
    var slider = document.getElementById("slider-bar");
    var handle = document.getElementById("slider-handle");
    var submitVal = document.getElementById("submit-value");

    // initial values
    var minVal = Number( document.getElementById("minimum-value").value );
    var maxVal = Number( document.getElementById("maximum-value").value );

    var range = maxVal - minVal;
    var isSliding = false;


    // recalculate range
    submitVal.onclick = function() {
        minVal = Number( document.getElementById("minimum-value").value );
        maxVal = Number( document.getElementById("maximum-value").value );
        range = maxVal - minVal;
    };

    // the sliding function
    var move = function(e) {

        var mouseY = 0;
        var containerTop = 0;
        var newHeight = 0;
        var containerHeight = 0;
        var percentHght = 0;
        var x = 0;
        var y = 0;
        var sliderValue = 0;

        if (!e) var e = window.event;

        if( e.pageY ){ // all browsers except IE before version 9
            mouseY = e.pageY;

        } else if ( e.clientY ) { // IE before version 9
            mouseY = e.clientY;
        }   

        containerTop = container.offsetTop;
        newHeight = mouseY - containerTop;
        containerHeight = container.offsetHeight;
        percentHght = newHeight * 100 / containerHeight;

        if( (percentHght <= 100) && (percentHght >= 0) ) {
            slider.style.height = (percentHght) + '%';
            y = 100 - percentHght;
            x = y * range / 100;

        } else if( percentHght < 0 ) {
            percentHght = 0;
            slider.style.height = (percentHght) + '%';
            y = 100 - percentHght;
            x = y * range / 100;

        } else if( percentHght > 100 ) {
            percentHght = 100;
            slider.style.height = (percentHght) + '%';
            y = 100 - percentHght;
            x = y * range / 100;
        }
        sliderValue = Math.round(x);
        document.getElementById('sliderValue').innerHTML = sliderValue + minVal;
    };

    // adding the slide functionality
    var addSlide = function() {
        isSliding = true;
        if ( !window.addEventListener ){
            document.attachEvent('onmousemove',move);
        } else {
            document.addEventListener('mousemove', move, false);
        }
    };

    // removing the slide functionality
    var cancelSlide = function() {
        if( isSliding ) {
            if ( window.removeEventListener ) {
                document.removeEventListener('mousemove', move, false);
            } else if ( window.detachEvent ) {
                document.detachEvent('onmousemove', move );
            }
        }
    };

    // cancelling event bubbling
    // cancelling default event action
    var cancelBubble = function(e) {
        var evt = e ? e:window.event;

        if( evt.stopPropogation ){
            evt.stopPropogation();
        }

        if( evt.cancelBubble != null ){
            evt.cancelBubble = true;
        }

        if( evt.preventDefault ){
            evt.preventDefault();
        } else {
            evt.returnValue = false;
        }
    };

    // capture events
    //capturing the mousedown on the handle
    handle.onmousedown = function(e) {
        addSlide();
        cancelBubble(e);
    }

    //capture the mouseup on the handle
    handle.onmouseup = function(e) {
        cancelSlide();
        cancelBubble(e);
    }

    // capture the mouse up on the slider
    slider.onmouseup = function(e) {
        cancelSlide();
        cancelBubble(e);
    }

    // capture the mouse down on the slider
    slider.onmousedown = function(e) {
        move(e);
        cancelBubble(e);
    }

    // capture the mouse up on the container
    container.onmouseup = function(e) {
        cancelSlide();
        cancelBubble(e);
    }

    // capture the mouse down on the container
    container.onmousedown = function(e) {
        move(e);
        cancelBubble(e);
    }

    // capture the mouse up on the window
    document.onmouseup = function(e) {
        cancelSlide();
        cancelBubble(e);
    }

})();

（函数（）{
//html元素
var container=document.getElementById（“滑块容器”）；
var slider=document.getElementById（“滑块”）；
var handle=document.getElementById（“滑块句柄”）；
var submitVal=document.getElementById（“提交值”）；
//初始值
var minVal=Number（document.getElementById（“最小值”）.value）；
var maxVal=Number（document.getElementById（“最大值”）.value）；
var范围=最大值-最小值；
var isSliding=假；
//重新计算范围
submitVal.onclick=函数（）{
minVal=编号（document.getElementById（“最小值”）.value）；
maxVal=编号（document.getElementById（“最大值”）.value）；
范围=最大值-最小值；
};
//滑动函数
变量移动=函数（e）{
var-mouseY=0；
var containerTop=0；
var newHeight=0；
var containerHeight=0；
var percentHght=0；
var x=0；
var y=0；
var sliderValue=0；
如果（！e）var e=window.event；
if（e.pageY）{//除IE版本9之前的所有浏览器
mouseY=e.pageY；
}else如果（e.clientY）{//IE在版本9之前
穆西=e.clientY；
}   
containerTop=container.offsetTop；
newHeight=mouseY-containerTop；
containerHeight=container.offsetHeight；
百分比高=新高度*100/集装箱高度；
如果（（百分比Hght=0））{
slider.style.height=（percentHght）+'%'；
y=100%高GHT；
x=y*范围/100；
}否则如果（百分比Hght<0）{
百分比Hght=0；
slider.style.height=（percentHght）+'%'；
y=100%高GHT；
x=y*范围/100；
}否则，如果（百分比>100）{
百分比Hght=100；
slider.style.height=（percentHght）+'%'；
y=100%高GHT；
x=y*范围/100；
}
sliderValue=数学圆（x）；
document.getElementById（'sliderValue'）。innerHTML=sliderValue+minVal；
};
//添加幻灯片功能
var addSlide=function（）{
isSliding=真；
如果（！window.addEventListener）{
文件。附件（'onmousemove'，move）；
}否则{
document.addEventListener（'mousemove'，move，false）；
}
};
//删除幻灯片功能
var cancelSlide=函数（）{
如果（滑动）{
如果（window.removeEventListener）{
document.removeEventListener（'mousemove'，move，false）；
}else if（window.detachEvent）{
document.detachEvent（'onmousemove'，move）；
}
}
};
//取消事件冒泡
//取消默认事件操作
var cancelBubble=函数（e）{
var evt=e？e:window.event；
如果（evt.stopPropogation）{
evt.stopPropogation（）；
}
if（evt.cancelBubble！=null）{
evt.cancelBubble=真；
}
如果（evt.preventDefault）{
evt.preventDefault（）；
}否则{
evt.returnValue=false；
}
};
//捕捉事件
//捕捉手柄上的鼠标向下移动
handle.onmousedown=函数（e）{
添加幻灯片（）；
取消气泡（e）；
}
//抓住把手上的鼠标
handle.onmouseup=函数（e）{
取消幻灯片（）；
取消气泡（e）；
}
//在滑块上捕捉鼠标
slider.onmouseup=函数（e）{
取消幻灯片（）；
取消气泡（e）；
}
//在滑块上向下捕捉鼠标
slider.onmousedown=函数（e）{
动议（e）；
取消气泡（e）；
}
//在容器上捕获鼠标
container.onmouseup=函数（e）{
取消幻灯片（）；
取消气泡（e）；
}
//在容器上捕获鼠标
container.onmousedown=函数（e）{
动议（e）；
取消气泡（e）；
}
//捕捉窗口上的鼠标
document.onmouseup=函数（e）{
取消幻灯片（）；
取消气泡（e）；
}
})();

这里是jsfiddle链接

这是一个链接输出端JSFIDLE

顺便说一下，添加以下内容：

slider.onmouseuout = slider.onmouseup;

每一个onmouseup声明的末尾都会出现这样的情况，如果滑块滑出滑块手柄，滑块仍然跟随指针的问题就会消失。

添加得太好了

还要改变这一点：

stopPropogation() --> stopPropagation() // spelling mistake

一个更好的方法是完全避免停止播放，因为这是一种不好的做法。有趣的文章：

如果您想要更大的手柄点击区域，例如添加触摸支持时：

#slider-handle {
    position: relative;
    width: 75px;
    height: 48px;
    left: -32.5px;
    top: -24px;
    border-radius: 50% / 50%;
    border: 1px solid red;  /* remove after test */
    cursor: grab;
}
#slider-handle:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 20%;
    top: 40%;
    left: 0;
    background: #fff;
    border-radius: 50%/50%;
}

---

请一次提出一个问题，并在问题中直接包含相关代码。排除这种情况：在

mousedown

中使用

preventDefault

。它会阻止选择和拖动。你能提供JSFIDDLE吗？我给了你的答案一个向上的投票…直到我发现没有办法反转它的操作（最小在顶部，最大在底部）。唉，我也很挣扎

#slider-handle {
    position: relative;
    width: 75px;
    height: 48px;
    left: -32.5px;
    top: -24px;
    border-radius: 50% / 50%;
    border: 1px solid red;  /* remove after test */
    cursor: grab;
}
#slider-handle:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 20%;
    top: 40%;
    left: 0;
    background: #fff;
    border-radius: 50%/50%;
}