【发布时间】：2019-06-29 08:35:38
【问题描述】：
我使用 html、css 和 javascript 创建了价格范围滑块。它在 google chrome 和 opera 浏览器中运行良好，但在 mozzila firefox 浏览器中无法运行。
请参阅下面提到的屏幕截图，当我尝试在 mozzila firefox 浏览器中运行它时得到了什么。我无法确定问题所在。
我无法在此处添加图片，但这是图片链接：Screenshot of the issue
请谁能帮我解决这个问题？
// Custom price range slider created by Pawan Mall | www.pawanmall.net
let rangeSlider = ((containerSelector, minSelector, maxSelector, selectionSelector, inputCallback, changeCallback) => {
inputCallback = inputCallback || function () { };
changeCallback = changeCallback || function () { };
let timeout;
let sliderContainer = document.querySelector(containerSelector);
let sliderMinElement = document.querySelector(minSelector);
let sliderMaxElement = document.querySelector(maxSelector);
let sliderSelectionElement = document.querySelector(selectionSelector);
let values = { min: sliderMinElement.value, max: sliderMaxElement.value };
sliderMinElement.addEventListener('input', e => {
sliderTimeout(() => { valueChanged(e); });
});
sliderMaxElement.addEventListener('input', e => {
sliderTimeout(() => { valueChanged(e); });
});
sliderMinElement.addEventListener('change', () => { changeCallback(values); });
sliderMaxElement.addEventListener('change', () => { changeCallback(values); });
return {
setHandles: data => {
data = data || {};
if (data.min) {
sliderMinElement.value = data.min;
valueChanged({ target: sliderMinElement });
}
if (data.max) {
sliderMaxElement.value = data.max;
valueChanged({ target: sliderMaxElement });
}
}
};
function valueChanged(event) {
if (event.target === sliderMinElement && +sliderMinElement.value >= +sliderMaxElement.value) {
sliderMinElement.value = +sliderMaxElement.value - 5;
return event.preventDefault();
}
if (event.target === sliderMaxElement && +sliderMinElement.value >= +sliderMaxElement.value) {
sliderMaxElement.value = +sliderMinElement.value + 5;
return event.preventDefault();
}
values.min = sliderMinElement.value;
values.max = sliderMaxElement.value;
sliderSelectionElement.style.left = +sliderMinElement.value / +sliderMaxElement.getAttribute('max') * 100 + '%';
sliderSelectionElement.style.right = +sliderMaxElement.value / +sliderMaxElement.getAttribute('max') * -100 + 100 + '%';
inputCallback(values);
}
function sliderTimeout(callback) {
clearTimeout(timeout);
timeout = setTimeout(callback, 10);
}
})('.range-slider', '.range-slider-min', '.range-slider-max', '.range-slider-selection', values => {
// console.log('values changed!', values);
// document.querySelector('.display1').innerHTML = '₹ '+ values.min + ', ₹ ' + values.max;
document.querySelector('.minmaxprice').value = values.min + ',' + values.max;
document.querySelector('.minprice').innerHTML = '₹ ' + values.min;
document.querySelector('.maxprice').innerHTML = '₹ ' + values.max;
}, values => {
// console.log('change done!', values);
});
rangeSlider.setHandles({ min: 5000, max: 250000 });
// console.log('inited!');
// https://seiyria.com/bootstrap-slider/#example-13
// $("#BudgetRange").slider({ min: 5000, max: 250000, value: [25000, 55000], focus: true });/* Custom price range slider created by Pawan Mall | www.pawanmall.net */
.range-slider {
margin: 0 0;
position: relative;
height: 20px;
}
.range-slider::before,
.range-slider-selection {
content: "";
position: absolute;
z-index: 2;
top: 50%;
margin-top: -2px;
height: 3px;
z-index: 2;
}
.range-slider-selection {
background: orange;
left: 0px;
right: 0px;
}
.range-slider::before {
background: #ccc;
left: 0px;
right: 0px;
}
.range-slider-min,
.range-slider-max {
pointer-events: none;
position: absolute;
overflow: hidden;
left: 0;
top: 0;
width: 100%;
outline: none;
-webkit-appearance: none;
}
.range-slider-min::-webkit-slider-thumb,
.range-slider-max::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
pointer-events: all;
position: relative;
z-index: 3;
outline: 0;
width: 20px;
height: 20px;
border-radius: 50%;
border: 1px solid #ddd;
background: #fff;
}
.range-slider-min:active::-webkit-slider-thumb,
.range-slider-max:active::-webkit-slider-thumb {
background: #f3f3f3;
}
.minmaxprice {
width: 200px;
text-align: center;
margin: 0 auto;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container m-3 p-3">
<div class="row mt-2">
<div class="col-md-6 col-sm-6 col-xs-6 col-lg-6">
<b class="minprice">₹ 5,000</b>
</div>
<div class="col-md-6 col-sm-6 col-xs-6 col-lg-6 text-right">
<b class="maxprice">₹ 2,50,000</b>
</div>
</div>
<div class="row mt-2">
<div class="col-md-12">
<div class="range-slider"><span class="range-slider-selection"></span>
<input class="range-slider-min" type="range" min="5000" max="250000"
step="1" value="5000" />
<input class="range-slider-max" type="range" min="5000" max="250000"
step="1" value="250000" />
<br />
<input type="hidden" class="minmaxprice" name="pricerange" value="" />
</div>
</div>
</div>
</div>【问题讨论】：
标签： javascript html css slider range