CODEWITHSUNDEEP
htmlcss
Tobbe
Tobbe

Reputation: 3824

input type range with smaller :active slider doesn't always work on iOS Safari

I have a standard html5 range input (aka slider) where I make the slider thumb (handle) smaller when the slider is active. This works fine in all web browsers I need to support, except for Safari on iOS (only tried on iPhone).

As soon as I change the width and height css attributes in the :active class it gets really hard to grab the slider handle to change the value. It works sometimes, but not always. The slider gets active, so the size changes, but the slider is "stuck". It doesn't follow my finger when I try to slide it.

Here's a CodePen with two sliders, the top one works flawlessly, the bottom one is sometimes difficult to "grab" on Safari https://codepen.io/tobbe_lundberg/pen/wvervQx

And here's the code for it:

input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 32px;
  margin-top: 40px;
}

input[type="range"]::-webkit-slider-runnable-track {
  background: pink;
  height: 4px;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 56px;
  width: 56px;
  background: pink;
  margin-top: -24px;
}

input[type="range"]:active::-webkit-slider-thumb {
  height: 56px;
  width: 56px;
  margin-top: -24px;
}

input.resize[type="range"]:active::-webkit-slider-thumb {
  height: 24px;
  width: 24px;
  margin-top: -10px;
}
<input type="range" min="0" max="100" step="1"/>
<input class="resize" type="range" min="0" max="100" step="1"/>

How can I make the resize effect work on Safari as well, using only CSS?

Upvotes: 0

Views: 1306

Answers (1)

lemonad
lemonad

Reputation: 4198

Edit: The way I worked around it, which might not work for you (and is somewhat of a hack,) is to to make the thumb visually smaller but not actually smaller. You can use a near-transparent border (or one with the same color as the background) that counteracts the reduced size of the visible part.

Too long to fit in a comment but did you solve this? I'm having problems that seem exactly the same as yours with the difference that I have a very thin slider thumb to start with.

Seeing your problem I tried to leverage the reverse as a solution: make the slider thumb much larger when active. This actually works like a charm when it comes to making it easier to grab the thumb.

One thing I noticed though, and I figure this could be one of the reasons behind the problems you're seeing: changing the slider thumb actually changes the range of the slider and thus the thumb position with it. If you make the thumb very large, you'll notice that the full range becomes spread over a very short distance.

Upvotes: 1

Related Questions