IOS / Android / Windows HTML range slider inconsistency - html

Question

I have the following vertical range slider setup.
Codepen LINK
Example here:
body{
display: flex;
justify-content:space-evenly;
align-items:center;
align-content:start;
flex-wrap:wrap;
width: 100%;
height: 100vh;
overflow:hidden;
}
:root{
--shader_top_half_color: cornflowerblue;
--shader_thumb_color: #5e7cd3;
--group_shader_top_half_color: #4bcca1;
--group_shader_thumb_color: #4cbb9f;
}
.shaderRangeWrapper {
width: 100px;
display: flex;
flex-direction: column;
gap: 45px;
justify-content: center;
align-items: center;
margin-top: 35px;
-webkit-tap-highlight-color: transparent;
position: relative;
}
input.shaderRange {
-webkit-tap-highlight-color: transparent;
transform: rotate(90deg);
height: 100px;
width: 150px !important;
margin: 0px;
padding: 0px;
-webkit-appearance: none;
background: transparent;
touch-action: none;
overflow: hidden;
border-radius: 0.5rem;
box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}
/* REMOVE BASIC STYLES */
.shaderRange::-webkit-slider-thumb {
-webkit-appearance: none;
}
.shaderRange:focus {
outline: none;
}
.shaderRange::-ms-track {
width: 100%;
cursor: pointer;
background: transparent;
border-color: transparent;
color: transparent;
}
/* STYLE THE THUMB FOR SPECIFIC BROWSERS */
/* Special styling for WebKit/Blink */
.shaderRange::-webkit-slider-thumb {
-webkit-appearance: none;
height: 90px;
width: 10px;
border-radius: 0.5rem;
background: var(--shader_thumb_color);
cursor: pointer;
margin-top: 5px;
box-shadow: -80px 0 0 75px var(--shader_top_half_color);
/* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
}
/* All the same stuff for Firefox */
.shaderRange::-moz-range-thumb {
height: 90px;
width: 10px;
border-radius: 0.5rem;
background: var(--shader_thumb_color);
cursor: pointer;
margin-top: 5px;
box-shadow: -80px 0 0 75px var(--shader_top_half_color);
}
/* All the same stuff for IE */
.shaderRange::-ms-thumb {
height: 90px;
width: 10px;
border-radius: 0.5rem;
background: var(--shader_thumb_color);
cursor: pointer;
margin-top: 5px;
box-shadow: -80px 0 0 75px var(--shader_top_half_color);
}
/* STYLE THE TRACK FOR SPECIFIC BROWSERS */
.shaderRange::-webkit-slider-runnable-track {
height: 100px;
height: 100px;
cursor: pointer;
background: transparent;
border-radius: 0.3rem;
}
.shaderRange:focus::-webkit-slider-runnable-track {
background: transparent;
}
.shaderRange::-moz-range-track {
height: 100px;
height: 100px;
cursor: pointer;
background: transparent;
border-radius: 0.3rem;
}
.shaderRange::-ms-track {
height: 100px;
height: 100px;
cursor: pointer;
background: transparent;
border-radius: 0.3rem;
}
/* GROUP SHADER STYLE */
/* Special styling for WebKit/Blink */
.shaderRange.groupShaderRange::-webkit-slider-thumb {
-webkit-appearance: none;
height: 90px;
width: 10px;
border-radius: 0.5rem;
background: var(--group_shader_thumb_color);
cursor: pointer;
margin-top: 5px;
box-shadow: -80px 0 0 75px var(--group_shader_top_half_color);
/* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
}
/* All the same stuff for Firefox */
.shaderRange.groupShaderRange::-moz-range-thumb {
height: 90px;
width: 10px;
border-radius: 0.5rem;
background: var(--group_shader_thumb_color);
cursor: pointer;
margin-top: 5px;
box-shadow: -80px 0 0 75px var(--group_shader_top_half_color);
}
/* All the same stuff for IE */
.shaderRange.groupShaderRange::-ms-thumb {
height: 90px;
width: 10px;
border-radius: 0.5rem;
background: var(--group_shader_thumb_color);
cursor: pointer;
margin-top: 5px;
box-shadow: -80px 0 0 75px var(--group_shader_top_half_color);
}
<div class="shaderRangeWrapper">
<input type="range" min="0" max="100" class="shaderRange">
<span class="shaderRangeName">Test 1</span>
</div>
On Android and Windows, i can click/tap anywhere on the slider and the thumb will follow my finger/cursor from where i clicked/tapped and it will not trigger a change until i release it. On IOS ( tested on Iphone 7 plus, 8 and X ) i can only slide the range if i manage to hit the thumb. If i miss tap and did not hit the slider's thumb, the slider will trigger a change and the thumb will not follow my tapping. How can i make this consistent on platforms?
HERE IS A DRIVE LINK To A VIDEO DEMONSTRATING THE GOOD BEHAVIOUR ON ANDROID AND THE BAD ON IOS
EDIT: The bad behaviour description was wrong. On IOS if i miss the thumb, it will not trigger a change, but the thumb will not follow my finger and i don't know where it is. Often times it does not change the range at all if i release it.