我正在尝试创建一个自定义反应范围滑块。到目前为止一切正常。我每次都需要在圆形切换按钮中显示滑块的当前值（不仅仅是在滑块上处于活动状态）。当滑块来回切换时，值应该在圆形切换按钮上动态变化。 像这样的：
我尝试使用 react refs 来捕获当前样式并相应地对其应用 CSS，但它似乎不起作用。
工作sn-p的链接：
https://codesandbox.io/s/eloquent-worker-qt99n?file=/src/customSlider.js
任何解决相同问题的帮助表示赞赏:)
提前致谢
【问题讨论】：
标签： javascript css reactjs slider
您的代码中有一些不一致的地方：
<output> 被 display: none 隐藏
.slideInpOuter 才能拥有position: relative，因此<output> 根据.slideInpOuter 定位
thumbwidth 应该是 35，因为在 sliderThumbStyles 中拇指的宽度设置为 35px
top 拇指和输出的 css 值应该相同line-height 输出应为 35px 以使文本垂直居中calc 不正确除此之外，您似乎无法从 ref 中破坏 thumbwidth，您需要像这样使用 .getAttribute currentValueRef.current.getAttribute("thumbwidth")
您可以在此处看到它与所有必需的更改一起工作 https://codesandbox.io/s/jovial-http-5tqex?file=/src/customSlider.js
我必须添加一个 useEffect 挂钩以在第一次渲染时更新样式
【讨论】：