Как синхронизировать input и range slider?

Question

[Кирилл]

Хочу чтобы двигая range слайдер менялся value у инпута, а вводя другое число в input передвигался ползунок слайдера к введенному значению. Вот второе и не получается реализовать. value в инпуте просто другое не вводится даже. Как это дело поправить?
https://codesandbox.io/s/xenodochial-dawn-9sien?fi...
Спасибо.

Answer 1

[0xD34F]

setValue(value === e.target.value);

Лишнее: value ===.

Ну и ограничений не хватает, так что:

setValue(Math.min(max, Math.max(min, e.target.value)));

UPD. Вынесено из комментариев:

Хотел реализовать тоже самое с двойным range слайдером и оказалось несколько сложнее.

Ничего сложного.

Comments

[Кирилл]

Хотел реализовать тоже самое с двойным range слайдером и оказалось несколько сложнее. Когда вводишь значение в инпут, то слайдер нормально подстраивается. Но как здесь заставить работать в обратную сторону? Не понятно как функцию написать, чтобы при изменении ползунка значения в 2 инпутах тоже менялись.

https://codesandbox.io/s/admiring-hamilton-i52t0?f...

[0xD34F]

Кирилл, дополнил ответ.