Как в React создать два зависимые инпута типа range (slider) с неровным шагом?

Question

[LeroViten]

1) Создать 2 инпута type range;
2) Первый инпут принимает значение в тысячах с шагом в 1000 от 1 до 20
(допустимые значения инпута 1000,2000....10000,20000,но не 19500)
3) Второй инпут принимает значение в единицах. Шаг неровный 3-7-14-54-70
(допустимые значения 3-7-14-54-70, но не 55 или 68)

Условие зависимостей одного инпута от второго:
4) Если на первом инпуте значение больше 10 000 ,на нижнем ползунке должно быть значение 54 или больше и его нельзя передвинуть на меньшее значение.
5) Если значение меньше 10 000 на верхнем ползунке,то можно передвинуть нижний ползунок на 3-7-14. Но не 54 или 70.

Песочница с примером тут: Sandbox

Answer 1

[0xD34F]

Сложить допустимые значения второго инпута в массив:

const values = [ 2, 3, 5, 7, 11, 13, 17, 19, ... ];

Сделать эффект, зависящий от обоих значений, где второе будет исправляться. Берёте ту половину допустимых значений второго инпута, которая соответствует текущему значению первого инпута, ищите в ней ближайшее к текущему второму:

useEffect(() => {
  const index = values.indexOf(граничное_значение_второго_инпута);

  setVal2(values
    .slice(...(val1 > граничное_значение_первого_инпута ? [ index ] : [ 0, index ]))
    .reduce((val, n) => Math.abs(val - val2) < Math.abs(n - val2) ? val : n)
  );
}, [ val1, val2 ]);

https://jsfiddle.net/recx8j6w/

Comments

[LeroViten]

Огромное тебе спасибо, человечище! ;)