input range - height 0 works only in firefox - css

Question

I have a custom style input range and I want to have height 0 to support my style -> the idea is to not have any in built style so I can make my slider appear according to a separate span element styles included on top, so for the span element to be visible, my input range custom styles should not be visible at all.
While my idea worked like a charm it is preventing click from working on safari and chrome - on firefox the click still works properly, with height 0.
Is there a way to tweak my input range style such that I can achieve this? Please find my input range styles below:
Css
input[type=range] {
-webkit-appearance: none;
width: 100%;
margin: 6.8px 0;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 0px;
cursor: pointer;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
box-shadow: transparent;
background: rgba(0, 0, 0, 0);
border-radius: 0px;
border: 0px solid rgba(0, 0, 0, 0);
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 0px solid #000000;
height: 20px;
width: 20px;
border-radius: 20px;
background: #ffffff;
cursor: pointer;
-webkit-appearance: none;
margin-top: -8.8px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
// background: rgba(13, 13, 13, 0);
background: rgba(0, 0, 0, 0);
}
Html
<input id="scrollbar" class="scrollbar" type="range" min=1 max=24 step="0.01" />

Answer 1

okay I solved the problem! We can provide background transparent. That made the slider clickable!
I found an excellent article on this topic.
input[type=range] {
-webkit-appearance: none;
width: 100%;
margin: 6.8px 0;
background: transparent;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 5px;
cursor: pointer;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
box-shadow: transparent;
border-radius: 0px;
background: transparent;
border-color: transparent;
color: transparent;
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 0px solid #000000;
height: 20px;
width: 20px;
border-radius: 20px;
background: #ffffff;
cursor: pointer;
-webkit-appearance: none;
margin-top: -8.8px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: transparent;
}
<input id="scrubber" class="scrollbar" type="range" min=1 max=24 step="0.01" />
** Please run on chrome and safari to test:D
I hope this post helps someone.