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

const RangeSlider=（{classes，label，onChange，value，…sliderProps}）=>{
const newValue=（（value-sliderProps.min）*100）/（sliderProps.max-sliderProps.min）；
常数newPosition=10—newValue*0.2；
返回(
{label}

{sliderProps.min}

{value}
{sliderProps.max}

);
};

上述组件在其父组件中的使用方式如下：

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

const[sliderProps，setSliderProps]=useState({
分:0,，
最高：100，
价值：20，
标签：“这是一个可重复使用的滑块”，
});
常量[sliderValue，setSliderValue]=useState（0）；
常量handleSliderChange=e=>{
setSliderValue（即目标值）；
};
....
.....
.....

---

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

如我在评论中所述，您需要检测屏幕宽度以调整比率值。差不多

我刚刚从中获取了一个

UseWindowsSize

hook，但是欢迎您使用您认为合适的任何其他方法来检测窗口宽度，但我建议您现在使用hook作为标准（至少目前是这样）

FWIW。我还将范围换行调整为

width:100%

，而不是硬编码为500px，以便调整大小（也稍微好一点）

根据您的其他评论更新：

您可以更新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;

---

我只是想说清楚。。。您不必使用页面宽度。。最主要的是你需要找到滑动条所在的容器的宽度，然后根据容器的宽度进行计算。我想到了最快的页面宽度，但可能有更好的解决方案。

我将这一行的newPosition修改为<代码>常数newPosition=10+newValue*4.8。但问题是，你需要将值

4.8

作为一个标尺，我认为这个标尺有多长。。。但在这个样本的背景下。。。那些值是有效的。试着用那条线玩-它可以正常工作，但当屏幕变小时会变得很奇怪…这正是我的意思。。。您可能需要一些额外的js来确定屏幕（或条）宽度，并随着屏幕大小的调整调整该值。感谢您提供的工作示例！也许我疯了，但我试着结合你的工作示例，我仍然让气泡远离滑块轨迹。很抱歉缺乏设计，但我正在尽我最大的努力整合这个滑块的使用方式（它基本上是在2列网格中的一个div中）-这很简单。您的宽度基本上减少了一半（因为您的内容区域现在变小了）<代码>常数比=尺寸.宽度/2/100-0.32，因为您已经有效地将页面宽度拆分为2…您需要根据布局调整比率值。。。所以如果你做4列布局。。。滑块跨越4列中的3列，您需要将比率调整为页宽*3/4。。。等我相信这将需要适应多屏幕大小。。和多个断点。我在大屏幕上观看，泡沫正在消失again@drifterOcean19好的，最后一个，那我就完了。但我明白你的意思，它有点偏离了。。。我的强迫症快把我逼疯了。但祝你好运。您还必须考虑容器上的填充物等因素，它们可能根据您的实际项目而有所不同：）