0
我在我的網站上使用範圍滑塊下面的代碼，一切正常，但滾動向上/向下而滑鼠滑塊更改酒吧的價值。這可能會導致意想不到的變化，如果用戶只是想滾動，用戶甚至可能不會注意到該值正在改變。滾動，而鼠標恰好在範圍滑塊上更改值
這個問題只發生在Windows和Firefox上（例如，Mac與Firefox的行爲不同）。
的代碼（從codepen信貸Sean Stopnik）：
var rangeSlider = function(){
var slider = $('.range-slider'),
range = $('.range-slider__range'),
value = $('.range-slider__value');
slider.each(function(){
value.each(function(){
var value = $(this).prev().attr('value');
$(this).html(value);
});
range.on('input', function(){
$(this).next(value).html(this.value);
});
});
};
rangeSlider();.range-slider {
width: 100%;
margin: 13px 0px;
}
.range-slider__range {
-webkit-appearance: none;
width: calc(100% - (73px));
height: 10px;
border-radius: 5px;
background: #d7dcdf;
outline: none;
padding: 0;
margin: 0;
}
.range-slider__range::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: #2c3e50;
cursor: pointer;
-webkit-transition: background .15s ease-in-out;
transition: background .15s ease-in-out;
}
.range-slider__range::-webkit-slider-thumb:hover {
background: #1abc9c;
}
.range-slider__range:active::-webkit-slider-thumb {
background: #1abc9c;
}
.range-slider__range::-moz-range-thumb {
width: 20px;
height: 20px;
border: 0;
border-radius: 50%;
background: #2c3e50;
cursor: pointer;
-webkit-transition: background .15s ease-in-out;
transition: background .15s ease-in-out;
}
.range-slider__range::-moz-range-thumb:hover {
background: #1abc9c;
}
.range-slider__range:active::-moz-range-thumb {
background: #1abc9c;
}
.range-slider__value {
display: inline-block;
position: relative;
width: 60px;
color: #fff;
line-height: 20px;
text-align: center;
border-radius: 3px;
background: #2c3e50;
padding: 5px 10px;
margin-left: 8px;
}
.range-slider__value:after {
position: absolute;
top: 8px;
left: -7px;
width: 0;
height: 0;
border-top: 7px solid transparent;
border-right: 7px solid #2c3e50;
border-bottom: 7px solid transparent;
content: '';
}
#info {
margin: 20px -1px;
font-size: 21px;
}
#data_value {
float: right;
margin-right: 50px;
font-size: 19px;
}
#CurrentCost, #Target_sidebar, #Target, #CurrentCost_sidebar {
font-weight: bold;
}
#regiration_form fieldset:not(:first-of-type) {
display: none;
}
input:invalid {
box-shadow: 0 0 5px 1px red;
}
input:focus:invalid {
outline: none;
}
.row.radio-scope {
margin-left: 15px;
}
.step_text {
margin-left: 10px;
}
.progress-bar {
background-color: #30424C;
}
.slider_row {
margin: 25px 0px;
padding-bottom: 15px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: #d7dcdf;
}
.slider {
margin-top: 10px;
}
.name {
margin-top: 3px;
}
::-moz-range-track {
background: #d7dcdf;
border: 0;
}
input::-moz-focus-inner,
input::-moz-focus-outer {
border: 0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="range-slider">
<input class="range-slider__range" type="range" value="100" min="0" max="500">
<span class="range-slider__value">0</span>
</div>
<div class="range-slider">
<input class="range-slider__range" type="range" value="250" min="0" max="500" step="50">
<span class="range-slider__value">0</span>
</div>
<div class="range-slider">
<input class="range-slider__range" type="range" value="400" min="0" max="500">
<span class="range-slider__value">0</span>
</div>我試圖找到MDN web docs的解決方案，該頁面沒有提及鼠標的滾動功能，並且該網頁，當如我所預期的那樣，當鼠標在滑塊上滾動時，頁面滾動並且滑塊值不會改變。
是否有可能解決這個問題？
謝謝。
仍然沒有解決Windows 10上使用Firefox 55.0.1（64位）的問題 – LifeOfPai
對不起，我不能重複該問題。即使在Windows 10 1703上的Firefox也是如此。 –