javascript - 如何为随当前值滑动的 slider 制作标签？

Question

我想在 slider 顶部制作一个标签，它会随着 slider 移动并在移动时更新它的值。 我可以让标签显示，但我不知道如何使用 slider 移动它。

此外，我想在两侧制作按钮，但如果我将它们放在栏的顶部， slider 将不再起作用。 (代码注释掉)

function slideBar({ min, max, onChange, value, style, onCLick }) {

    return (
        <div className="slider-whole">
            <div className="labels" style={style}>                
                <p className="min">{min}</p>
                <p className="currentValue" style={style}>{value}</p>      
                <p className="max">{max}+</p>
            </div>

            <input
                type="range"
                name="range"
                min={min}
                max={max}git 
                value={value}
                className={`slider slider${style.color}`}
                id="myRange"
                onChange={onChange}
                style={style}
             />

            {/* <div className="arrow-buttons" style={style}>
            <i className="fas fa-chevron-left"></i>
            <i className="fas fa-chevron-right"></i>
            </div> */}


            {/* <output htmlFor="range" onforminput="value = range.valueAsNumber;"></output> */}

            </div>
    )
}

Answer 1

设置你的类 slider-name 为 position:relative 类 currentValue 为 position:absolute; 和随着当前值的变化，动态设置 left 的值。