如何使用JavaScript创建此范围栏？

Question

.range {-moz-box-sizing: border-box;box-sizing: border-box;-webkit-background-clip: padding-box;background-clip: padding-box;vertical-align: top;outline: none;line-height: 1;-webkit-appearance: none;-webkit-border-radius: 4px;border-radius: 4px;border: none;height: 2px;-webkit-border-radius: 0;border-radius: 0;-webkit-border-radius: 3px;border-radius: 3px;background-image: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#ddd));background-image: -webkit-linear-gradient(#ddd, #ddd);background-image: -moz-linear-gradient(#50b1f9, #50b1f9);background-image: -o-linear-gradient(#ddd, #ddd);background-image: linear-gradient(#50b1f9,#50b1f9);background-position: left center;-webkit-background-size: 100% 2px;background-size: 100% 2px;background-repeat: no-repeat;overflow: hidden;height: 31px;}
.range::-moz-range-track {position: relative;border: none;background-color: #50b1f9;height: 2px;border-radius: 30px;box-shadow: none;top: 0;margin: 0;padding: 0;}
.range::-webkit-slider-thumb {cursor: pointer;-webkit-appearance: none;position: relative;height: 29px;width: 29px;background-color: #fff;border: 1px solid #ddd;-webkit-border-radius: 30px;border-radius: 30px;-webkit-box-shadow: none;box-shadow: none;top: 0;margin: 0;padding: 0;}
.range::-moz-range-thumb {cursor: pointer;position: relative;height: 15px;width: 15px;background-color:#fff;border: 1px solid #ddd;border-radius: 30px;box-shadow: none;margin: 0;padding: 0}
.range::-webkit-slider-thumb:before {position: absolute;top: 13px;right: 0px;left: -1024px;width: 1024px;height: 2px;background-color: #50b1f9;;content: '';margin: 0;padding: 0;}
.range:disabled {opacity: 0.3;cursor: default;pointer-events: none;}

<input type="range" class="range">

我必须制作此范围栏，当我滑动时，月份也会相应地改变。我试着把它变成css但是为了改变范围，我需要JavaScript。

Answer 1

var range = document.getElementById("range"),
    progress = document.getElementById("progress"),
    handle = document.getElementById("handle"),
    valueBox = document.getElementById("value"),
    movable = false,
    offsetX = range.offsetLeft,
    rangeWidth = range.offsetWidth,
    handleWidth = handle.offsetWidth,
    max = 100, left, mouseX, value;

function move(e) {
    if ( movable === true ) {
        left = e.clientX - offsetX;
        handle.style.left = left - ( handleWidth / 2 ) + "px";
        progress.style.width = left + "px";

        if ( left >= rangeWidth ) {
            handle.style.left = rangeWidth - ( handleWidth / 2 ) + "px";
            progress.style.width = rangeWidth + "px";
        } if ( left <= 0 ) {
            handle.style.left = "-" + handleWidth / 2 + "px";
            progress.style.width = "0px";
        }

        value = Number(parseFloat(progress.style.width) / ( rangeWidth / max )).toFixed(0);
        valueBox.textContent = value;
    }
};

function on(e) {
    movable = true;
    mouseX = e.clientX;
};

function off() { 
    movable = false;
};

handle.addEventListener("mousedown", on, false);
window.addEventListener("mousemove", move, false);
window.addEventListener("mouseup", off, false);

* { margin: 0; padding: 0; border: 0; outline: 0; }
body { background-color: #FF0000; }

#range {
    width: 350px;
    height: 14px;
    background-color: #242424;
    margin: 100px auto 15px;
    border-radius: 50px;
    position: relative;    
}

#progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-color: #00A79D;
    border-radius: 50px;
}

#handle {
    position: absolute;
    top: -3px;
    height: 20px;
    width: 20px;
    background-color: #eee;
    border-radius: 50px;
    cursor: pointer;
}

#handle:hover, #handle:active {
    background-color: #ddd;
}

#value-box {
    text-align: center;
    font: 14px arial;
    line-height: 35px;
    color: #eee;
    width: 170px;
    height: 35px;
    background-color: rgba(0, 0, 0, .2);
    margin: auto;
    border-radius: 2px;
}

<div id="range">
    <div id="progress"></div>
    <div id="handle"></div>
</div>

<div id="value-box">Range bar Value : <span id="value">0</span></div>

检查Snippet中的输出。

最后输出：

Python Package Index