In my HTML5 code, I have implemented a range input slider with a smaller handle when the slider is active. This functionality works perfectly across all supported web browsers except for Safari on iOS (specifically tested on an iPhone).
However, in Safari on iOS, changing the width and height CSS attributes in the :active class makes it challenging to manipulate the slider handle to adjust the value. The slider appears active and the size changes, but it becomes unresponsive to finger movements while attempting to slide it.
I have created a CodePen example showcasing two sliders - the top one functions smoothly, while the bottom one occasionally struggles to be manipulated in Safari https://codepen.io/tobbe_lundberg/pen/wvervQx
Below is the CSS code snippet used:
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"/>Is there a way to achieve the resize effect in Safari as well using only CSS?