In my range slider the track is coming over on thumb while working fine on Chrome

Question

Here are my css html that I am using in my website. View attached images for a better understanding of my problem. Tried z-index and other things but not working. Its working fine on chrome and safari but overlapping in mozilla firefox browser.

Chrome View Image (which is working fine)

Mozilla firefox view Image with the problem

    input[type=range] {
    -webkit-appearance: none; 
    appearance: none;
    width: 100%;
    position: absolute;
    left: 0;
    height: 2px;
    background-color: #9cc9f8;
}

input[type=range]::-webkit-slider-runnable-track {
    width: 300px;
    height: 2px;
    background: #9cc9f8;
    border: none;
    border-radius: 3px;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: 2px solid #3195ff;
    height: 24px;
    width: 24px;
    border-radius: 50%;
    background: #ffffff;
    margin-top: -10px;
    cursor: pointer;
    position: relative;
    z-index: 1;
}


/* Firefox uses 'moz' prefix instead of 'webkit' */
input[type=range]::-moz-range-track {
    width: 300px;
    height: 2px;
    background: #9cc9f8;
    border: none;
    border-radius: 3px;
}

input[type=range]::-moz-range-thumb {
    border: 2px solid #3195ff;
    height: 24px;
    width: 24px;
    border-radius: 50%;
    background: #ffffff;
    cursor: pointer;
    z-index: 1;
}

input[type=range]:focus {
    outline: none;
}

input[type=range]:focus::-moz-range-track {
    outline: none; 
}

input[type=range]:focus::-webkit-slider-runnable-track {
    background: #9cc9f8bb;
}

 <div class="slider">
                    <div style="font-weight: bolder; color: rgb(44, 44, 44); margin-bottom: 14px;">Price</div>
                    <div id="price_slider" class="range-slider">
                        <input value="{{min_price}}" id="min_price_slider" min="50" max="4000" step="500"
                            type="range">
                        <input value="{{max_price}}" id="max_price_slider" min="0" max="8000" step="500"
                            type="range">
                        <span class="rangeValuesPrice"></span>
                    </div>
                </div>
                <div class="slider">
                    <div style="font-weight: bolder; color: rgb(44, 44, 44); margin-bottom: 14px;">Duration</div>
                    <div id="duration_slider" class="duration-slider">
                        <input value="{{min_duration}}" id="min_duration_slider" min="1" max="60" step="1"
                            type="range">
                        <input value="{{max_duration}}" id="max_duration_slider" min="1" max="60" step="1"
                            type="range">
                        <span class="rangeValuesDuration"></span>
                    </div>
                </div>