search

Cool-Runningz / range-input.css

Generate CSS to style range inputs that look consistent across all browsers
https://range-input-css.netlify.app/
MIT License
34 stars 2 forks source link

The touch area might be too small #1

Closed simevidas closed 2 years ago

simevidas commented 2 years ago

I’m testing your demo on an iPhone 8. I have trouble grabbing the thumb with my finger. Most of the time, it doesn’t slide. I guess, the vertical touch area is just too small. Maybe this could be fixed by enlarging the height of the touch area?

When I test the standard range input (https://37osw.csb.app/), I do not have this problem most of the time.

Cool-Runningz commented 2 years ago

What browser are you using? I can try testing on my iPhone to compare.

simevidas commented 2 years ago

I checked in Safari and Firefox, but there should be no difference between browsers on iOS because it’s all the same WebKit engine.

Btw, one behavior that makes range inputs on iOS harder to use than on Android is that dragging the track does nothing. You have to either drag the thumb or tap the track.

Cool-Runningz commented 2 years ago

Good to know and thanks for the information! When I created this project, I didn't really intend for it to be used on a mobile device so I'm not surprised that there may be some issues. I will keep potential mobile improvements in mind as I continue to maintain the project, however, it's not a priority at the moment since a majority of traffic views are from a computer.

Thanks again for bringing this to my attention and you are welcome to submit a PR with mobile improvements if you'd like 🙂