css - 如何让值文本跟随 slider 输入？

Question

我在 React 中创建了一个 Slider。

看起来像这样:

import styles from '../Slider.scss';

type Props = {|
    maxValue: Number,
    minValue: Number,
    onChange: Function,
    step?: Number,
    value: Number
|};

const SliderInput = (props: Props) => {

    const ratio = (props.value - props.minValue) / (props.maxValue - props.minValue);

    return (
        <div className={styles[`slider-container`]}>
            <div className={styles.labels}>
                <span>${props.minValue}</span>
                <span>${props.maxValue}</span>
            </div>
            <div>
                <input
                    className={styles.slider}
                    max={props.maxValue}
                    min={props.minValue}
                    onChange={props.onChange}
                    step={props.step}
                    type="range"
                    value={props.value}
                />
                <div className={styles[`slider-value`]}>
                    <span>${props.value}</span>
                </div>
            </div>
        </div>
    );
};

样式如下所示:

.slider-container {
    width: 100%;
}

.slider {
    -webkit-appearance: none;
    background: transparent;
    width: 100%;
    height: 25px;
    background-image: linear-gradient(to right, #F5F5F5, #A5D8F5);
    outline: none;
}

.slider-value {
    /* Not sure what goes here yet */
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 30px;
    height: 30px;
    background: black;
    cursor: pointer;
}

.labels {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

我想要完成的事情:我希望 slider 的值显示在 slider 输入当前位置的正上方或下方。我想我必须给 slider-value 一个 position: absolute，但我不确定除此之外还能做什么。

Answer 1

首先，我们添加相对于 .slider-value 的位置，我们需要匹配 input[type=range] 的宽度，因为我们要移动 使用 left 属性沿着它跨越。

.slider-value {
    position: relative;

    /* it's for because left moves the element relative to it's left not the middle */
    width:calc(100% - 30px);  
}

.slider-value>span {
    position: absolute;
    text-align: center;

    /* must match the thumb width */
    width: 30px;
}

我不会讨论如何更新值，我只是想告诉你如何使用它，所以我们要把 slider 的值赋给 span 的 left 属性，

应该得到更新并作为 Prop 传递给 slider ，例如:

<span style={{left:this.props.value+"%"}} >{this.props.value}</span>

当 minValue 等于 0 并且 maxValue 等于 100 时，这会很好地工作，但是这不是唯一的情况，因此我们映射该值。

map 函数应该是这样的，我只是从p5.js lib

复制过来的

map(n, start1, stop1, start2, stop2) {
    return ((n-start1)/(stop1-start1))*(stop2-start2)+start2;
}

跨度应该是这样的

<span style={{this.map(this.props.value,this.props.minValue,this.props.maxValue,0,100)+"%"}} >{this.props.value}</span>

如果您有任何问题，请不要犹豫，我知道我很擅长解释。 :)

编辑

Live Demo <强> Code