javascript - 反应范围滑块值气泡

Question

我正在尝试创建一个自定义反应范围滑块。到目前为止一切正常。我每次都需要在圆形切换按钮中显示滑块的当前值（不仅仅是在滑块上处于活动状态）。当滑块来回切换时，值应该在圆形切换按钮上动态变化。像这样的东西：

我尝试使用 react refs 来捕获当前样式并相应地对其应用 CSS，但它似乎不起作用。

工作片段的链接：

https://codesandbox.io/s/eloquent-worker-qt99n?file=/src/customSlider.js

解决同样问题的任何帮助表示赞赏:)

提前致谢

标签： javascriptcssreactjsslider

Answer 1

您的代码中有一些不一致之处：

• <output>隐藏在display: none
• 你需要.slideInpOuter有position: relative所以<output>根据.slideInpOuter
• thumbwidth应该是 35，因为拇指的宽度设置35px为sliderThumbStyles
• top拇指和输出的 css 值应该相同
• line-height输出应该是35px垂直居中文本
• 你calc错误地使用了css

除此之外，您似乎无法thumbwidth从 ref 中破坏，您需要.getAttribute像这样使用currentValueRef.current.getAttribute("thumbwidth")

您可以在这里看到它与所有必需的更改一起工作https://codesandbox.io/s/jovial-http-5tqex?file=/src/customSlider.js

我必须添加一个 useEffect 挂钩来更新第一次渲染时的样式