时间戳

首页 > 解决方案 > 反应自定义滑块 - 在滑块上显示气泡值

javascript - 反应自定义滑块 - 在滑块上显示气泡值

问题描述

我正在创建一个动态滑块（希望如此！）这是我到目前为止所拥有的 -代码框

这是我的滑块组件：

const RangeSlider = ({ classes, label, onChange, value, ...sliderProps }) => {
    const newValue = ((value - sliderProps.min) * 100) / (sliderProps.max - sliderProps.min);
    const newPosition = 10 - newValue * 0.2;

    return (
        <div className={styles.slider}>
            <p>{label}</p>
            <p>{sliderProps.min}</p>
            <div className={styles.rangeWrap}>
                <div className={styles.rangeValue} id={"rangeV"}>
                    <span style={{ left: `calc(${newValue}% + (${newPosition}px))` }}>{value}</span>
                </div>
                <input
                    {...sliderProps}
                    type={"range"}
                    value={value}
                    className={`slider ${classes}`}
                    id={"myRange"}
                    onChange={onChange}
                />
            </div>
            <p>{sliderProps.max}</p>
        </div>
    );
};

上面的这个组件在其父组件中的使用如下：

const [sliderProps, setSliderProps] = useState({
    min: 0,
    max: 100,
    value: 20,
    label: "This is a reusable slider",
});
const [sliderValue, setSliderValue] = useState(0);

const handleSliderChange = e => {
    setSliderValue(e.target.value);
};

....
.....
.....

<RangeSlider
   {...sliderProps}
   classes={styles.slider}
   onChange={handleSliderChange}
   value={sliderValue}
/>

我似乎无法正确计算气泡值。正如您在沙箱中看到的那样，滑块顶部的气泡正向相反方向移动。我想要的是让它在移动/滑动时在滑块顶部同步。我究竟做错了什么？任何帮助将不胜感激！！

标签： javascriptcssreactjs

解决方案

正如我在评论中所说，您需要检测屏幕宽度来调整比率值。像这个工作示例这样的东西。

const size = useWindowSize();
const ratio = size.width / 100 - 0.35;
const newPosition = 10 + newValue * ratio;

我刚刚从这里useWindowSize抓了一个钩子，但是欢迎您使用您认为适合的任何其他方法来检测窗口宽度，但我建议您现在使用钩子作为它的标准（至少现在）。

FWIW。我还调整了范围换行width:100%，而不是硬编码为 500px，这样它就可以调整大小（也更好一点）

.rangeWrap {
  position: relative;
  width: 100%;
}

更新，根据您的其他评论：

您可以更新 ratio calc 以适应仅在页面布局的某些部分中存在的滑块。在您的更新中，您有一个 2 列布局，所以我会这样做。

// breakpoint at which the layout shifts
const isDesktop = size.width > 770;

// mobile has a 1 col layout
const cols = isDesktop ? 2 : 1

// this seems to need some slightly 
// different values at the different layouts to look decent
const pxShift = isDesktop ? 0.4 : 0.5;

// voila!
const ratio = size.width / cols / 100 - pxShift;

只是要清楚...您不必使用页面宽度..主要是您需要以某种方式找到滑块所在容器的宽度，然后根据该容器宽度进行计算。页面宽度是最快想到的，但可能有更好的解决方案。

推荐阅读