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

Answer 1

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

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

1 个答案: