如何将值输入到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',
    }}
  />

当前滑块图像：

我需要“蓝色滑块”中的滑块值

Answer 1

找到解决方案：

在Slider组件中使用handle prop，可以在其中指定函数，该函数将返回带有自己的子代的Handle组件：

const { Handle } = Slider;

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

结果：