Слайдер API Материала не отображает слайдер должным образом в случае номера дроби как шага, отмечает |материал пользовательского интерфейса |Слайдер |реагировать - PullRequest
Новая
       21

Слайдер API Материала не отображает слайдер должным образом в случае номера дроби как шага, отмечает |материал пользовательского интерфейса |Слайдер |реагировать

0 голосов
/ 11 октября 2019

У меня есть приложение реагирования, в которое я собираюсь добавить слайдер Material UI. Но я не могу правильно создать слайдер. Я не знаю, какое свойство отсутствует на моей стороне.

Вот мой компонент React 

import * as React from 'react';
import Slider from '@material-ui/core/Slider';

const marks = [
  {
    value: -1.5,
    label: '-1.5'
  },
  {
    value: -0.5,
    label: '-0.5'
  },
  {
    value: 0.5,
    label: '0.5'
  },
  {
    value: 1.5,
    label: '1.5'
  }
];

class SliderUi extends React.Component<any, any> {
  render() {
    return (
      <>
      <Slider
        defaultValue={1.5}
        aria-labelledby="discrete-slider-small-steps"
        step={1.0}
        marks={marks}
        min={-1.5}
        max={1.5}
        valueLabelDisplay="auto"
      />
      </>
    );
  }
}

Как вы можете видеть, значение по умолчанию - "1.5", а значение шага -1, поэтому значение 1,5 выбрано по умолчанию.

Когда загружен вышеуказанный компонент, отображается следующий вывод enter image description here

, и когда я перемещаю ползунок, я могуне в состоянии выбрать отмеченное значение, как 1,5, 0,5 и так далее. По умолчанию он работает, и я могу выбрать только -1, 0 и 1 ( Но я не хочу этого. Пользователь должен выбирать только отмеченное значение, то есть 1,5, 0,5 и т. Д. )

enter image description here

Реф. Ссылка - Слайдер материала

Если кто-то захочет поработать над этим, тогда Ссылка в песочнице

1 Ответ

0 голосов
/ 11 октября 2019

хорошо, если вы хотите выбрать отмеченное значение, вы должны установить шаг равным нулю, вы можете сделать это как 

return (
  <>
  <Slider
    defaultValue={1.5}
    aria-labelledby="discrete-slider-small-steps"
    step={null}
    marks={marks}
    min={-1.5}
    max={1.5}
    valueLabelDisplay="auto"
  />
  </>
);

Надеюсь, это поможет

...