How to make number entry work with mouse wheel?

Question

css

Here is an example
https://www.w3schools.com/tags/tryit.asp?filename=...

I would like to change the number, but so that the number can be changed already when hovering over with the mouse, is it possible do?
Since it is there now, you still have to put additional pressure on the field, and only then you can turn the mouse.

Answer 1

Here, fixed your circles drawn through path,

hehehe

ну ты и извращенец

You have two upper paths named oval and oval2 moving down 80 points
I used transform="translate(0,-80)" in these two paths
https://codepen.io/origami1024/pen/PooNdGz
these ovals are true 3- 12 are not shown at all, are they supposed to be invisible? If the principle with the translate is clear, finish it yourself, because I need to go sing karaoke urgently (

Answer 2

The answer is in your question. Listen to the field's hover/focus event and include a mouse wheel listener on it. According to the results, increment the value in the range in one direction or another. In order not to go beyond the range, you will have to count all these attributes in JS.