Difficult to use Sliders on Mobile

jpdevries commented 7 years ago

I think this is part on the operating system (iOS) because <range> components are difficult to use on mobile anyways, but when inside overflow-x:auto they aren't useable.

I thought this was an interesting design challenge so I brainstormed a few possible solutions:

use <select> for mobile. As crazy as it sounds, select dropdowns are really usable on touch
don't horizontally scroll on mobile. I understand this is done with the hopes of keeping the output color preview within the viewport while modifying the adjusters. Perhaps a micro feature like making the border or a minor design element change with the output preview component would eliminate the need for horizontal scrolling
hack it with js? maybe swallowing the touch events on the <range> would prevent the scroll action from happening in the first place. seems like iOS should ensure this automatically.

tylergaw commented 7 years ago

Thanks @jpdevries. I pushed a few changes up working on this the other day https://github.com/tylergaw/colorme/pull/4 Are you seeing those updates?

Along with you ideas, wondering too if the size of the range selector + thumb could go larger. Was also wondering if it would help if the range value input dropped down below the range.

shershen08 commented 7 years ago

"Are you seeing those updates?" - no, current version is not responsive

With minimal media-query it could be adjusted to smth like this

I could PR if you like

tylergaw commented 7 years ago

@shershen08 Interesting. What OS, Browser is that from?

Here's what I'm seeing on iOS 9.3, Mobile Safari:

shershen08 commented 7 years ago

@tylergaw - I see (Chrome @ Android) same the pic as you've posted. The pic I've attached though is what I could propose as a mobile responsive UI

tylergaw / colorme

Difficult to use Sliders on Mobile #5