编辑

Question

我已经在响应中创建了一个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-value一个position: absolute，但我不知道该怎么办。

Answer 1

首先，我们添加相对于.slider-value的位置，并且需要匹配input[type=range]的宽度，因为我们将使用span属性将left沿其移动。< / p>

.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;
}

我不会讨论如何更新值，我只会告诉您如何使用它，因此我们将滑块的值分配给跨度的left属性

应该得到更新，并作为道具传递给滑块，例如：

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

这在minValue equals 0和maxValue equals 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

如何获取值文本以跟随滑块输入？

1 个答案:

编辑