Добавить кнопки навигации по rc-слайдеру - реагировать - PullRequest
Новая
       14

Добавить кнопки навигации по rc-слайдеру - реагировать

0 голосов
/ 11 марта 2019

Я пытаюсь сделать этот слайдер в реакции с rc-слайдером. Но я не мог добавить кнопки «-» и «+» на отметках.

Я пытаюсь сделать с метками, но метки не принимают значения реквизита.

Мои значения для min = {} и max = {} являются динамическими, тогда значение для - и + должно быть равно minValue (min) и maxValue (max) .

Вот мой код, но знаки не работают. 

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

enter image description here

1 Ответ

1 голос
/ 11 марта 2019

Я думаю, что вы неправильно использовали 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. Я использовалuseState Реагирует на ловушку, но вы можете реализовать ее как компонент класса с state, если требуется.

...