React Range Slider 值气泡

React Range Slider value bubble

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

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

link 工作片段：

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

任何解决同样问题的帮助表示感谢:)

提前致谢

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

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

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

您可以在此处看到它已完成所有必需的更改 https://codesandbox.io/s/jovial-http-5tqex?file=/src/customSlider.js

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