More accessibility is always better. :)
Maybe some aria attributes would be relevant, but at first the component have to be used with keyboard (focus inside then arrow keys), not only mouse.
For example, this lib, which has waaay less options than yours (and not maintained), implement this behavior :
https://github.com/pehaa/beerslider
There is an input "range" with aria attributes, for accessibility and… that's all, I think there is 0 line of JS for keys because "range" HTML component is already focusable and usable by keyboard!
https://developer.mozilla.org/fr/docs/Web/HTML/Element/input/range
So I suppose that they only synchronize the bar&after with the percent value of the input "range".
More accessibility is always better. :) Maybe some aria attributes would be relevant, but at first the component have to be used with keyboard (focus inside then arrow keys), not only mouse.
For example, this lib, which has waaay less options than yours (and not maintained), implement this behavior : https://github.com/pehaa/beerslider
There is an input "range" with aria attributes, for accessibility and… that's all, I think there is 0 line of JS for keys because "range" HTML component is already focusable and usable by keyboard! https://developer.mozilla.org/fr/docs/Web/HTML/Element/input/range So I suppose that they only synchronize the bar&after with the percent value of the input "range".