Слайдер диапазона Firefox переместите палец над треком ⇐ CSS

[Anonymous]

У меня есть пользовательский ползунок с стилизованием, который чудесно работает на Chrome, однако не функционирует, как предназначен для Firefox. src = "https://i.sstatic.net/9az22.png"/>
Однако на Firefox я не могу сделать это, несмотря на настройку большого пальца слайдера. Я прикрепляю скрипку с моим кодом: < /p>

Код: Выделить всё

$( window ).on( "load", function() {
sliderValues();
});

$( window ).resize(function() {
sliderValues();
});

let mouseDown;
$(document).mousedown(function() {
mouseDown = true;
}).mouseup(function() {
mouseDown = false;
});

let stepChangeThreshold = 3000;

$('#range').on('mousemove',function(e){
if (!mouseDown) return;

this.previousClientX = this.previousClientX || e.clientX;
let stepChangeThresholdPositionX = this.getBoundingClientRect().x+($('#range').width()*stepChangeThreshold/5500);

if (this.value == stepChangeThreshold){
if ((this.previousClientX > e.clientX) && (e.clientX < stepChangeThresholdPositionX)){
this.step = 250;
} else {
this.step = 500;
}

}

this.previousClientX = e.clientX;
});

$('#range').on('input', function() {
sliderValues();

var val = $('#range').val();
if (val >= stepChangeThreshold) {
this.step = 500;
} else {
this.step = 250;
};
this.previousVal = val;

});

function sliderValues(){
var val = $('#range').val();
var min = $('#range').attr('min');
var max = $('#range').attr('max');
var portion = (val - min) / (max - min);
$('#rangeV').html('$'+ val +'');
$('#rangeV').css('left', portion * ($('#range').width() - 70));

let thumbSliderRatio = (70/$('#range').width())*100;
let fillPercent = Number(portion*(100-thumbSliderRatio) + thumbSliderRatio/2) + "%";

$('#range').css('background','linear-gradient(to right, #008e39 0%, #008e39 ' + fillPercent + ', #ccc ' + fillPercent + ', #ccc 100%)');
};< /code>
.borrowheading {
text-align: center;
font-size: 21px;
font-family: 'Open Sans', sans-serif;
font-weight: 800;
padding: 25px;
margin-top: 50px;
}

#range {
-webkit-appearance: none;
margin: 20px 0;
width: 100%;
background: linear-gradient(to right, #008e39 0%, #008e39 50%, #ccc 50%, #ccc 100%);
border-radius: 8px;
height: 7px;
width: 100%;
outline: none;

}
#range:focus {
outline: none;
}

#range::-webkit-slider-thumb {
height: 70px;
width: 70px;
border-radius: 50%;
background-color: #008e39;
cursor: pointer;
-webkit-appearance: none;
margin-top: -100px;
}

#range::-moz-range-thumb {
height: 70px;
width: 70px;
border-radius: 50%;
background-color: #008e39;
cursor: pointer;
margin-top: -100px;
border: none;
}

.range-wrap{
width: 90%;
position: relative;
margin: auto;
margin-top: 120px;
}
.range-value{
position: absolute;
}
.range-value span{
width: 70px;
height: 70px;
text-align: center;
color: #fff;
font-size: 20px;
line-height: 48px;
display: block;
position: absolute;
pointer-events: none;
font-family: 'Open Sans', sans-serif;
font-weight: 700;
margin-top: -64px;
}

.range-value span:after {
content: "";
position: absolute;
width: 0;
height: 36px;
border: 2px solid #008e39;
top: 55px;
left: calc(50% - 1px);
}< /code>


[h4]How much would you like to borrow today?[/h4]

Как я могу поднять свой палец Slider на 100px на Firefox?

Подробнее здесь: https://stackoverflow.com/questions/638 ... -the-track