Improve slider usability on touch-only devices

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 / colorme

Improve slider usability on touch-only devices #4