添加 rc-slider 的导航按钮 - react

Question

我正在尝试执行此滑块以响应 rc-slider。但是我无法在标记上添加按钮“-”和“+”。

我想用标记来处理，但标记不接受道具的价值。

我的 min={} 和 max={} 的值是动态的，那么 - 和 + 的值应该等于 minValue(min) 和 最大值(最大值).

这是我的代码，但标记不起作用。

<Slider
      min={minValue}
      max={maxValue}
      step={simulationType === 'type' ? 100 : 5000}
      onChange={this.props.onChange}
      defaultValue={this.props.value}
      marks={{minValue:'-', maxValue: '+'}} 
    />

Answer 1

我认为您对 marks 的使用有误。它们用于仅添加有关特定值的指示。我认为它们并不像您想要的那样具有交互性。您可以添加 2 个按钮来为您完成这项工作。并将其与滑块挂钩。

我是这样实现的：

function SliderWrapper({ max, min, step }) {
  const [value, setValue] = useState(min);
  return (
    <>
      <button onClick={() => setValue(Math.max(0, value - 10))}>-</button>
      <Slider
        onChange={value => setValue(value)}
        value={value}
        step={step}
        min={min}
        max={max}
      />
      <button onClick={() => setValue(Math.min(100, value + 10))}>+</button>
    </>
  );
}

您可以在此处查看实际实施：https://codesandbox.io/s/1y1lzvxm6l. I've used useState React hook，但如果需要，您可以将其作为 state 的 class 组件来实施。

添加 rc-slider 的导航按钮 - react

Add buttons of the navigation of the rc-slider - react

reactjs

react-component

rc-slider