Как реализовать поле непрозрачности с вводом значения и слайдером в веб-разработке?

Что проверяют

Умеете ли вы связать два контрола с одним значением без рассинхрона и без багов на промежуточном вводе. Задача выглядит простой, но интервьюер смотрит на детали: единый источник истины, валидацию, доступность и то, что именно меняет opacity. Следом просят сделать из этого переиспользуемый компонент.

Как отвечать

• одно значение: состояние хранится в одном месте, например непрозрачность от 0 до 100 в процентах. Слайдер и поле только отображают его и сообщают об изменениях. В React это useState и два контролируемых input с общим обработчиком;
• разметка: <input type="range" min="0" max="100" step="1"> и <input type="number"> с теми же границами, у каждого свой <label>. Проценты понятнее пользователю, чем 0.37, а в CSS уходит value / 100;
• события: у range событие input срабатывает при каждом движении, change при отпускании. Для живого превью нужен input;
• ввод числа: пока человек печатает, в поле бывает пусто или «1» на пути к «15». Не зажимайте значение на каждый символ: принимайте валидное, а к диапазону приводите на blur и Enter. Читайте valueAsNumber и проверяйте на NaN;
• доступность: нативный range уже управляется стрелками, а aria-valuetext="40%" поможет скринридеру озвучить проценты;
• производительность: если значение применяется к тяжёлому canvas, обновляйте его через requestAnimationFrame, а не на каждое событие.

Стоит оговорить, что opacity делает прозрачным элемент вместе с детьми и текстом. Если нужна прозрачность только фона, берите альфа-канал цвета: rgb(0 0 255 / 0.4).

Где спотыкаются

Пишут Math.max(input.value, 0). Пустая строка превращается в 0, и стоит стереть поле, чтобы ввести новое число, как элемент исчезает.

Держат два независимых состояния и синхронизируют их взаимными обработчиками. Появляются циклы обновлений и расхождения, когда одно поле уже обновилось, а другое нет.

Не ограничивают ввод. Значение 250 или минус 5 уходит в стили и в сохранённые настройки, а у type="number" атрибуты min и max ввод не запрещают, они влияют только на стрелки и валидацию формы.