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

Improve slider usability on touch-only devices #4

Merged
merged 1 commit into from Jan 6, 2017

Conversation

Projects
None yet
1 participant
@tylergaw
Owner

tylergaw commented Jan 6, 2017

Because the Adjusters are in a horizontally scrollable container, using the range sliders on touch devices can be tough or:

My only thought is that it is nearly impossible to adjust the sliders on a mobile device.

This PR attempts to make them more usable by increasing the range thumb size for devices without hover support.

This is limited to browsers that recognize the ::-webkit-slider-thumb selector. That's a non-standard selector for the range slider thumb.

With these changes, by default, the pertinent CSS for the thumb is:

.adjusterValRange::-webkit-slider-thumb {
  ...
  height: 1.6rem;
  margin-top: -0.8rem;
  width: 1.6rem;
}

.adjusterValRange::-webkit-slider-thumb:hover,
.adjusterValRange::-webkit-slider-thumb:active {
  margin-top: -1.8rem;
  height: 2.5rem;
  width: 2.5rem;
}

I purposely set the margin-top on :active to make the thumb vertically off-center. This way there is more of a chance it won't be hidden behind the user's finger when they're using it.

Here's a screenshot from the iOS simulator showing the off-center and larger :active style of the thumb.
screen shot 2017-01-06 at 9 53 04 am

Because we only want the larger range thumb on non-hover devices, this uses the hover media query to provide a smaller thumb to those devices:

@media (hover) {
  .adjusterValRange::-webkit-slider-thumb {
    ...
    height: 0.75rem;
    margin-top: -0.3rem;
    width: 0.75rem;
  }

  .adjusterValRange::-webkit-slider-thumb:hover,
  .adjusterValRange::-webkit-slider-thumb:active {
    margin-top: -0.5rem;
    height: 1.1rem;
    width: 1.1rem;
  }
}

hover is a new(er) media query: https://www.w3.org/TR/mediaqueries-4/#hover

@tylergaw tylergaw merged commit d29c61c into develop Jan 6, 2017

2 checks passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details
continuous-integration/travis-ci/push The Travis CI build passed
Details

@tylergaw tylergaw deleted the tg-improve-sliders-on-touch branch Jan 6, 2017

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