基于HTML/CSS/JS的价格范围滑块在Firefox中失效求助

我帮你排查了这个双滑块在Firefox中失效的问题，核心原因是Firefox对<input type="range">的样式和行为处理和WebKit内核浏览器（Chrome、Opera）存在差异，下面是具体的修复步骤和完整代码：

主要问题点及修复 #

• 缺失Firefox滑块拇指样式：你只针对WebKit内核写了::-webkit-slider-thumb，Firefox需要对应的::-moz-range-thumb伪元素样式，并且要重置Firefox默认的range输入样式。
• 滑块交互区域的兼容性：Firefox中range输入的默认pointer-events和布局需要调整，确保两个滑块可以独立拖动且不互相干扰。
• 样式计算的细节优化：调整选中区域的位置计算逻辑，确保在Firefox中显示正确。

修改后的完整代码 #

CSS部分（添加Firefox兼容样式） #

/* 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;
	appearance: none;
	/* 重置Firefox默认样式 */
	background: transparent;
	border: none;
}
/* WebKit滑块拇指样式 */
.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;
}
/* Firefox滑块拇指样式 */
.range-slider-min::-moz-range-thumb, .range-slider-max::-moz-range-thumb {
	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::-moz-range-thumb, .range-slider-max:active::-moz-range-thumb {
	background: #f3f3f3;
}
/* 隐藏Firefox默认的range轨道 */
.range-slider-min::-moz-range-track, .range-slider-max::-moz-range-track {
	background: transparent;
	border: none;
}
.minmaxprice {
	width: 200px;
	text-align: center;
	margin: 0 auto;
}

JavaScript部分（优化值计算逻辑） #

// 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: parseInt(sliderMinElement.value), max: parseInt(sliderMaxElement.value) };
	const maxValue = parseInt(sliderMaxElement.getAttribute('max'));
	const minValue = parseInt(sliderMaxElement.getAttribute('min'));

	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) {
		let currentMin = parseInt(sliderMinElement.value);
		let currentMax = parseInt(sliderMaxElement.value);

		// 确保最小值不超过最大值，且在范围内
		if (event.target === sliderMinElement) {
			if (currentMin >= currentMax) {
				currentMin = currentMax - 5;
				sliderMinElement.value = currentMin;
			}
			if (currentMin < minValue) {
				sliderMinElement.value = minValue;
				currentMin = minValue;
			}
		}
		// 确保最大值不小于最小值，且在范围内
		if (event.target === sliderMaxElement) {
			if (currentMax <= currentMin) {
				currentMax = currentMin + 5;
				sliderMaxElement.value = currentMax;
			}
			if (currentMax > maxValue) {
				sliderMaxElement.value = maxValue;
				currentMax = maxValue;
			}
		}

		values.min = currentMin;
		values.max = currentMax;

		// 计算选中区域的位置，使用总范围（maxValue - minValue）来计算百分比
		const totalRange = maxValue - minValue;
		const leftPercent = ((currentMin - minValue) / totalRange) * 100;
		const rightPercent = ((maxValue - currentMax) / totalRange) * 100;

		sliderSelectionElement.style.left = `${leftPercent}%`;
		sliderSelectionElement.style.right = `${rightPercent}%`;

		inputCallback(values);
	}

	function sliderTimeout(callback) {
		clearTimeout(timeout);
		timeout = setTimeout(callback, 10);
	}
})('.range-slider', '.range-slider-min', '.range-slider-max', '.range-slider-selection', values => {
	document.querySelector('.minmaxprice').value = `${values.min},${values.max}`;
	document.querySelector('.minprice').innerHTML = `₹ ${values.min.toLocaleString()}`;
	document.querySelector('.maxprice').innerHTML = `₹ ${values.max.toLocaleString()}`;
}, values => {
	// console.log('change done!', values);
});
rangeSlider.setHandles({ min: 5000, max: 250000 });

HTML部分（无需修改） #

<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>

修复说明 #

1. CSS部分：添加了Firefox专属的滑块拇指样式::-moz-range-thumb，并重置了Firefox默认的range轨道和输入框样式，确保两个滑块在Firefox中可见且可交互。
2. JS部分：优化了值的计算逻辑，使用总范围（max - min）来计算选中区域的百分比，避免因直接使用max值导致的位置偏移；同时增加了值的边界检查，确保滑块不会超出设定的min和max范围。
3. 额外优化：使用toLocaleString()格式化价格显示，让数字更易读。

内容的提问来源于stack exchange，提问作者user4530922