Question

我正在尝试在javascript中创建一个垂直滑块小部件。我不是在寻找任何插件或库，我试图看看它是如何使用普通的javascript完成的。我想我有了一般的想法。

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

http://eco-system2031.appspot.com/pages/ex5slider/verticalslider.html

问题：

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

2）当我释放鼠标（鼠标按钮）时，滑块有时不会被释放，即使在鼠标按下后滑块也会随鼠标一起移动。

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

Answer 1

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

这是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>

这是css

        #slider-container {
        width: 20px;
        height: 325px;
        margin: 100px;
        margin-top: 30px;
        background: #26AFE3;
        /* Safari 3-4, iOS 1-3.2, Android 1.6 */
        -webkit-border-radius: 20px 20px 20px 20px;
        /* Firefox 1-3.6 */
        -moz-border-radius: 20px 20px 20px 20px;
        /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
        border-radius: 20px 20px 20px 20px;
    }

    #slider-bar {
        width: 100%;
        height: 100%;
        background: #E6E6E6;
        /* Safari 3-4. iOS 1-3.2, Android 1.6 */
        -webkit-border-radius: 20px 20px 20px 20px;
        /* Firefox 1-3.6 */
        -moz-border-radius: 20px 20px 20px 20px;
        /* Opera 10.5, IE9, Safari 5, Chromer, Firefox 4, iOS 4, Android 2.1+ */
        border-radius: 20px 20px 20px 20px;
    }

    #slider-handle {
        width: 25px;
        height: 25px;
        background: #7C7D82;
        position: relative;
        left: -2.5px;
        top: -10px;
        /* Safari 3-4, iOS 1-3.2, Android 1.6 */
        -webkit-border-radius: 2px 20px 20px 20px;
        /* Firefox 1-3.6 */
        -moz-border-radius: 20px 20px 20px 20px;
        /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
        border-radius: 20px 20px 20px 20px;
    }

这是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);
    }

})();

这里是jsfiddle链接

http://jsfiddle.net/nPaKp/

这里是jsfiddle的链接

http://eco-system2031.appspot.com/pages/ex5slider/verticalslider.html

Answer 2

顺便补充一下：

slider.onmouseuout = slider.onmouseup;

每个onmouseup声明结束时的事情，如果滑块从滑块手柄滑落，滑块仍然跟在指针后面的问题消失了。

Answer 3

很棒的补充！

还要更改此内容：

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

一个更好的方法是完全避免stopPropagation，因为这是不好的做法。有趣的文章：Dangers of stopping event propagation

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

#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%;
}

Javascript垂直滑块

3 个答案: