Disabling keyboard use for input range

Question

I have a standard form with a slider:

`<input type="range" min="0" max="100" value="50" id="my_slider" name="my_slider">`

The value of the slider can be selected either with the mouse or with the arrow keys (after clicking on the slider). How can I disable the keyboard and force the user to position the slider with the mouse?

One possibility is obviously to disable the arrow keys on the whole page with Java Script, but I would like to avoid that if possible.

Thank you.

Answer 1

You can block the keys with onkeydown event...

<input type="range" min="0" max="100" value="50" id="my_slider" name="my_slider"
 onkeydown="event.preventDefault()">