Блог

Как вы видите, я хочу сделать слайд с 2 метками, который представляет цену между 2 значениями и обрабатывает ее на слайде. Я связал ввод с помощью ползунка, но ползунок для ввода не работает. Я попытался реализовать эту функцию на onchange слайдера. Мне нужно отображать обе данные отдельно в текстовых полях «От» и «До». Ссылка на проект здесь

Основная проблема здесь в функции. Алгоритм работает плохо, может быть, вы могли бы предложить лучшее решение:

 const handleSliderFrom = (event, newValue) => {
    if (newValue[0]) {
      if (newValue[0] === 0) {
        setState({ ...state, priceFrom: 15000 });
      } else if (newValue[0] === 20) {
        setState({ ...state, priceFrom: 50000 });
      } else if (newValue[0] === 40) {
        setState({ ...state, priceFrom: 100000 });
      } else if (newValue[0] === 60) {
        setState({ ...state, priceFrom: 200000 });
      } else if (newValue[0] === 80) {
        setState({ ...state, priceFrom: 500000 });
      } else if (newValue[0] === 100) {
        setState({ ...state, priceFrom: 1000000 });
      }
    } else if(newValue[1]){
      if (newValue[1] === 0) {
        setState({ ...state, priceTo: 15000 });
      } else if (newValue[1] === 20) {
        setState({ ...state, priceTo: 50000 });
      } else if (newValue[1] === 40) {
        setState({ ...state, priceTo: 100000 });
      } else if (newValue[1] === 60) {
        setState({ ...state, priceTo: 200000 });
      } else if (newValue[1] === 80) {
        setState({ ...state, priceTo: 500000 });
      } else if (newValue[1] === 100) {
        setState({ ...state, priceTo: 1000000 });
      }
    }
  };
 

Я увидел 3 основные проблемы в вашем коде:

1 — Ваши условия

 if (newValue[0]) {
 

и

 if (newValue[1]) {
 

Если значение newValue[0] или newValue[1] равно 0, вы не будете вводить в этих условиях, поэтому с вашим фактическим кодом вы не можете установить значение 0.

2 — У вас есть много условий, когда вы могли бы использовать массив меток для получения scaledValue из значения.

3 — Вы сохраняете минимальные и максимальные цены в 2 разных местах:

• fromPriceInput и toPriceInput
• state.priceFrom и state.priceTo

Поскольку третья проблема не связана с вашим вопросом, я не буду освещать ее в своем ответе.

Я упростил вашу функцию, охватив первые 2 пункта:

   const handleSliderFrom = (event, newValue) => {
    const newPriceFrom = marks.find((mark) => mark.value == newValue[0])
      ?.scaledValue; // search the mark with a value of newValue[0] and returns the scaleValue of this mark
    const newPriceTo = marks.find((mark) => mark.value == newValue[1])
      ?.scaledValue; // search the mark with a value of newValue[1] and returns the scaleValue of this mark
    setState({ priceFrom: newPriceFrom, priceTo: newPriceTo }); // set the store with your new minimum and maximum values (no need to do it one by one, you method will always recieve both)
  };
 

https://codesandbox.io/s/reverent-hellman-rtdl3?file=/src/App.js:2772-3375