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也是如此。 –