如何為與當前值一起滑動的滑塊制作標簽？

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

使用position:relative設置類slider-name ，使用position:absolute;類currentValue position:absolute; 並隨着當前值的變化動態設置left的值。