Thumb is difficult to drag using touch input with custom <input type="range"> controls

When using custom <input type="range"> controls with .custom-range, the thumb is difficult to drag using touch input (mobile and tablet). This occurs on iOS and Android, across browsers.

I recently observed some users interacting with the Bootstrap range sliders in my own project, and almost unanimously they had difficulties with tapping the thumb to drag it. Of course, anywhere in the track can be tapped to ‘jump’ the thumb to that position, but that doesn’t seem to be the primary way users try to interact with it.

Could the hitbox for the thumb be increased in size? Perhaps with the ::before / ::after pseudo elements. It looks like material-ui does something like this, and in my own testing their slider thumb is far easier to drag.

The current effective hitbox is a 1.4rem square (marked in transparent green):

Could this be increased to twice the value of $custom-range-thumb-width — so by default a 2rem diameter circle? (marked in transparent green):

[polarstoat]

Actually I’ve got it working in Firefox just fine (see updated CodePen):

.custom-range {
  &::-webkit-slider-thumb {
    background-clip: padding-box;
    border: 0.4rem solid rgba(0, 255, 0, 0.5);
    transform: scale(4);
  }
  &::-moz-range-thumb {
    background-clip: padding-box;
    border: 0.4rem solid rgba(0, 255, 0, 0.5);
    box-sizing: border-box;
    transform: scale(4);
  }
}

I’m not sure why it becomes necessary to explicitly set box-sizing: border-box; for Firefox, but with it it seems to look/work exactly as Safari/Chrome.

It seems unlikely we’ll see better browser support for touch controls like this anytime soon, and currently the usability of them is quite poor. I don’t think this solution (once the :focus outline if figured out/fixed) is a particularly hacky one.

[patrickhlauke]

note that material-UI and similar frameworks end up “faking” the sliders with extra spans/divs etc, wihch in the end break them for users of touch+assistive technologies (i’ve filed issues with some of them about this).

currently, the bootstrap slider simply adds a bit of style/finesse to the native <input type="range">, so the problem is fundamentally one of the browsers not making these controls touch-friendly enough. not sure if there’s a clean solution to this at this point, i’m afraid.