New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Difficult to use Sliders on Mobile #5

jpdevries opened this Issue Jan 8, 2017 · 4 comments


None yet
3 participants

jpdevries commented Jan 8, 2017

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.

This comment has been minimized.


tylergaw commented Jan 9, 2017

Thanks @jpdevries. I pushed a few changes up working on this the other day #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.

@tylergaw tylergaw added the ui label Jan 9, 2017


This comment has been minimized.

shershen08 commented Jan 12, 2017

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

With minimal media-query it could be adjusted to smth like this
screen shot 2017-01-12 at 09 45 08

I could PR if you like


This comment has been minimized.


tylergaw commented Jan 12, 2017

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

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


This comment has been minimized.

shershen08 commented Jan 12, 2017

@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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment