Tôi đang cố gắng tạo tiện ích thanh trượt dọc trong javascript. Tôi không tìm kiếm bất kỳ plugin hoặc thư viện nào, tôi đang cố gắng xem cách thực hiện bằng cách sử dụng javascript thuần túy. Tôi nghĩ tôi hiểu được điều đó.

Vui lòng xem những gì đã được phát triển cho đến nay tại đây và xem mã nguồn để xem mã, vui lòng mở liên kết trong chrome.

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

câu hỏi:

1) Đôi khi, khi tôi di chuyển thanh trượt lên trên cùng hoặc dưới cùng, phạm vi giới hạn (ví dụ: 0, 500) không được tính toán chính xác.

2) Đôi khi tôi thả chuột (mouseup), thanh trượt không được nhả ra, ngay cả sau khi di chuột lên, thanh trượt cũng di chuyển theo chuột.

3) Chỉ sử dụng javascript cho bất kỳ điều gì khác mà bạn cần để làm cho mã của bạn mạnh mẽ và mượt mà hơn.

câu trả lời hay nhất

Và thế là xong. Cảm ơn bạn rất nhiều vì sự giúp đỡ của bạn.

Đây là HTML

    Giá trị tối thiểu:  

Giá trị tối đa:  

 

Giá trị thanh trượt:  
 

    

    

Đây là CSS

        #slider-container {
        chiều rộng: 20px;
        chiều cao: 325px;
        lề: 100px;
        lề trên: 30px;
        nền: #26AFE3;
        /* Safari 3-4, iOS 1-3.2, Android 1.6 */
        -webkit-biên giới-bán kính: 20px 20px 20px 20px;
        /*Firefox 1-3.6 */
        -moz-biên giới-bán kính: 20px 20px 20px 20px;
        /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
        bán kính đường viền: 20px 20px 20px 20px;
    }

    #thanh trượt {
        width: 100%;
        chiều cao: 100%;
        nền: #E6E6E6;
        /*Safari 3-4. iOS 1-3.2, Android 1.6 */
        -webkit-biên giới-bán kính: 20px 20px 20px 20px;
        /*Firefox 1-3.6 */
        -moz-biên giới-bán kính: 20px 20px 20px 20px;
        /* Opera 10.5, IE9, Safari 5, Chromer, Firefox 4, iOS 4, Android 2.1+ */
        bán kính đường viền: 20px 20px 20px 20px;
    }

    #tay cầm thanh trượt {
        chiều rộng: 25px;
        chiều cao: 25px;
        nền: #7C7D82;
        position: relative;
        trái: -2,5px;
        trên cùng: -10px;
        /* Safari 3-4, iOS 1-3.2, Android 1.6 */
        -webkit-biên giới-bán kính: 2px 20px 20px 20px;
        /*Firefox 1-3.6 */
        -moz-biên giới-bán kính: 20px 20px 20px 20px;
        /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
        bán kính đường viền: 20px 20px 20px 20px;
    }

Đây là js

    (chức năng () {
    // phần tử html
    var container = document.getElementById("slider-container");
    var trượt = document.getElementById("thanh trượt");
    var Handle = document.getElementById("tay cầm thanh trượt");
    var submitVal = document.getElementById("gửi giá trị");

    // giá trị ban đầu
    var minVal = Number( document.getElementById("minimum-value").value );
    var maxVal = Number( document.getElementById("maximum-value").value );

    phạm vi var = maxVal - minVal;
    var isSliding = false;


    // tính toán lại phạm vi
    submitVal.onclick = function() {
        minVal = Số( document.getElementById("giá trị tối thiểu").giá trị);
        maxVal = Số( document.getElementById("maximum-value").value );
        phạm vi = maxVal - minVal;
    };

    // hàm trượt
    var move = function(e) {

        var mouseY = 0;
        var containerTop = 0;
        var newHeight = 0;
        var containerHeight = 0;
        var phần trămHght = 0;
        var x = 0;
        var y = 0;
        var thanh trượtValue = 0;

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

        if( e.pageY ){ // tất cả các trình duyệt ngoại trừ IE trước phiên bản 9
            mouseY = e.pageY;

        } else if ( e.clientY ) { // IE trước phiên bản 9
            mouseY = e.clientY;
        }   

        containerTop = container.offsetTop;
        newHeight = mouseY - containerTop;
        containerHeight = container.offsetHeight;
        phần trămHght = newHeight * 100 / containerHeight;

        if( (percentHght <= 100) && (percentHght >= 0) ) {
            Slider.style.height = (percentHght) + '%';
            y = 100 - phần trămHght;
            x = y * phạm vi / 100;

        } khác nếu( phần trămHght < 0 ) {
            phần trămHght = 0;
            Slider.style.height = (percentHght) + '%';
            y = 100 - phần trămHght;
            x = y * phạm vi / 100;

        } khác nếu( phần trămHght > 100 ) {
            phần trămHght = 100;
            Slider.style.height = (percentHght) + '%';
            y = 100 - phần trămHght;
            x = y * phạm vi / 100;
        }
        SliderValue = Math.round(x);
        document.getElementById('sliderValue').innerHTML = SliderValue + minVal;
    };

    // thêm chức năng slide
    var addSlide = function() {
        isSliding = đúng;
        if (!window.addEventListener){
            document.attachEvent('onmousemove',move);
        } khác {
            document.addEventListener('mousemove', move, false);
        }
    };

    // loại bỏ chức năng slide
    var cancelSlide = function() {
        if( isSliding ) {
            if (window.removeEventListener) {
                document.removeEventListener('mousemove', move, false);
            } khác nếu (window.detachEvent) {
                document.detachEvent('onmousemove', move );
            }
        }
    };

    // hủy bỏ sự kiện sủi bọt
    // hủy hành động sự kiện mặc định
    var cancelBubble = function(e) {
        var evt = e ?

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

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

        if(evt.preventDefault){
            evt.preventDefault();
        } khác {
            evt.returnValue = false;
        }
    };

    // nắm bắt sự kiện
    // chụp mousedown trên tay cầm
    hand.onmousedown = function(e) {
        addSlide();
        cancelBubble(e);
    }

    //bắt mouseup trên tay cầm
    hand.onmouseup = function(e) {
        cancelSlide();
        cancelBubble(e);
    }

    // bắt chuột lên trên thanh trượt
    thanh trượt.onmouseup = hàm (e) {
        cancelSlide();
        cancelBubble(e);
    }

    // bắt chuột xuống thanh trượt
    thanh trượt.onmousedown = hàm (e) {
        di chuyển(e);
        cancelBubble(e);
    }

    // bắt chuột lên container
    container.onmouseup = function(e) {
        cancelSlide();
        cancelBubble(e);
    }

    // bắt chuột xuống container
    container.onmousedown = function(e) {
        di chuyển(e);
        cancelBubble(e);
    }

    // bắt chuột lên trên cửa sổ
    document.onmouseup = function(e) {
        cancelSlide();
        cancelBubble(e);
    }

})();

Đây là liên kết jsfiddle

http://jsfiddle.net/nPaKp/

Đây là liên kết đến jsfiddle

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

Về thanh trượt dọc Javascript, chúng tôi đã tìm thấy một câu hỏi tương tự trên Stack Overflow: https://stackoverflow.com/questions/23645226/