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

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

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

函数滑块（{min，max，onChange，value，style，onCLick}）{
返回(
{min}
{value}
{max}+
{/* 
*/}
{/*  */}
)
}

使用

位置：相对设置类
滑块名称
，使用
位置：绝对设置类
当前值
并在当前值更改时动态设置
left
的值

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