如何将值输入到 rc-slider 句柄

Question

我需要将滑块的当前值输入滑块手柄（按钮）。可以在 rc-slider 中这样做吗？

我尝试使用 rc-tooltip，但这不是我想要的

当前滑块代码：

<Slider
    vertical
    min={50}
    defaultValue={100}
    max={150}
    step={2}
    dots
    onChange={onSliderChange}
    trackStyle={{ backgroundColor: '#06080E' }}
    railStyle={{ backgroundColor: '#06080E' }}
    handleStyle={{
      height: 25,
      width: 70,
      marginLeft: -14,
      marginTop: -9,
      backgroundColor: '#075DFF',
      border: 'none',
      borderRadius: 3,
      boxShadow: 'none !imporatnt',
    }}
    dotStyle={{
      width: 30,
      border: 'none',
      borderRadius: 0,
      height: 1,
      backgroundColor: '#666',
    }}
    activeDotStyle={{
      backgroundColor: 'white',
    }}
  />

当前滑块图片：

我需要 "blue slider button"

中的滑块值

Answer 1

找到解决方案：

在 Slider 组件中使用 handle 属性，您可以在其中指定将 return 处理具有自己子组件的组件的函数：

const { Handle } = Slider;

const sliderHandle = (e) => {
  const { value } = e;
  return (
    <Handle {...e}>{value}</Handle>
  );
};

结果：

如何将值输入到 rc-slider 句柄

How to input value into rc-slider handle

slider

reactjs

rc-slider