javascript - 如何为与当前值一起滑动的滑块制作标签？

Question

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

另外，我想在侧面制作按钮，但如果我把它们放在栏的顶部，滑块就不再起作用了。（代码注释掉了）

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>
    )
}

标签： javascriptreactjs

Answer 1

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