Отвязка стрелок клавиатуры от управления элементом input type=range
 

Такая проблема. Пишу свой видеоплеер, реализовал обработку нажатий стрелок клавиатуры вверх, вниз, влево, вправо для управления звуком и перемоткой на +/- n секунд. Но вот в чем беда. Ползунок регулировки громкости я сделал с помощью <input type="range"> и если его покрутить с помощью мыши (дать ему фокус), то потом нажатия на курсор клавиатуры не только перематывают видео, но и регулируют этот ползунок. А если нажать вверх или вниз, то вовсе звук регулируется на +/- 10% вместо 5 (нажатие на кнопку срабатывает как для моего обработчика, так и для ползунка).
Как это вылечить? Есть другие варианты кроме как сделать ползунок громкости с помощью div'ов?

Отмена действия браузера

<input type="range" max="10" min="1" onkeydown="event.preventDefault()">

Шикарно, спасибо)

Я решил вопрос иначе. Добавил аттрибут readonly, а при наведении мышки на полоску звука я его убирал. Но ваш способ явно меньше смахивает на костыль, так что теперь применил его.