Javascript 垂直 slider

Question

我正在尝试在 javascript 中创建一个垂直 slider 小部件。我不是在寻找任何插件或库，我正在尝试查看如何使用纯 javascript 完成它。我想我大概明白了。

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

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

问题:

1) 有时，当我将 slider 移动到最顶部或最底部时，边界范围(例如:0、500)无法正确计算。

2) 有时当我释放鼠标(mouseup)时， slider 不会被释放，即使在 mouseup 之后， slider 也会随着鼠标移动。

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