Input type=range setting slider on click

[reven86]

I style my input having quite thin line for track and progress elements. I can drag the sliderbar but it is very hard to set the slider position with click because I need to click exactly on the very thin track line. I see in the code that only slidertrack and sliderprogress elements receive click events. Can we make the parent input element receive click events instead to properly set slider position? Or how could I style the element to make sure I can set the slider position with simple click on input element?

[mikke89]

Hey.

Yeah, I've had a similar design like this:

The trick is as follows: Set a transparent border on the slidertrack and give it a border width to your liking. The transparent border will then be clickable.