CSS Range Slider在Chromium浏览器的兼容性问题求助

问题核心 #

Chromium内核浏览器（Chrome、Edge等）不支持Firefox专属的::-moz-range-progress伪元素，这是导致进度条无法显示的直接原因。要实现跨浏览器的滑块进度条效果，需针对不同浏览器内核做适配。

最优解决方案（CSS+JS结合） #

通过容器模拟进度条背景，配合CSS变量动态计算进度宽度，同时保留Firefox原生进度条支持，实现无差异的跨浏览器效果。

1. 微调HTML结构 #

给每个滑块添加外层容器，用于承载进度条背景：

<main>
  <div>
    <p>Price Range (£):</p>
    <div class="range-slider">
      <div class="slider-container">
        <input class="rs" type="range" value="50000" min="50000" max="1000000" />
      </div>
      <p><span id="demo1" class="range-slider__value">50000</span></p>
    </div>
  </div>

  <div class="slidecontainer text-dark text-center">
    <p>Property Geo (m2):</p>
    <div class="range-slider">
      <div class="slider-container">
        <input class="rs" type="range" value="250" min="40" max="12000" step="10" />
      </div>
      <p><span id="demo2" class="range-slider__value">40</span></p>
    </div>
  </div>
</main>

2. 更新CSS代码 #

main {
  display: flex;
  justify-content: center;
  gap: 2rem;
}

/* 进度条容器：模拟滑块轨道背景 */
.slider-container {
  position: relative;
  width: 500px;
  height: 10px;
  border-radius: 15px;
  background: #f1f1f1;
  box-shadow: 1px 1px 1px var(--black);
}

input[type="range"] {
  height: 10px;
  -webkit-appearance: none;
  margin: 10px 0;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: transparent; /* 透明化滑块自身背景，露出容器背景 */
  z-index: 1;
}

/* 统一滑块手柄样式 */
input[type="range"]::-ms-thumb,
input[type="range"]::-webkit-slider-thumb,
input[type="range"]::-moz-range-thumb {
  box-shadow: 1px 1px 1px var(--ltgray);
  border: 1px solid var(--ltgray);
  height: 18px;
  width: 18px;
  border-radius: 15px;
  background-color: var(--orangeclr);
  cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  margin-top: -4px; /* 垂直居中调整 */
}

input[type="range"]::-ms-thumb {
  margin-top: 0;
}

input[type="range"]:focus {
  outline: none;
}

/* Firefox 原生进度条保留 */
input[type="range"]::-moz-range-track {
  background: transparent;
  border: none;
}

input[type="range"]::-moz-range-progress {
  background-color: var(--orangeclr);
  height: 10px;
  border-radius: 15px;
}

/* Chromium 进度条模拟：通过CSS变量动态计算宽度 */
.slider-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 15px;
  background-color: var(--orangeclr);
  width: calc(var(--slider-value, 0) * 1%);
  z-index: 0;
}

3. 修改JavaScript逻辑 #

动态计算当前值占总范围的百分比，更新CSS变量以同步进度条：

// ===== Range slider ====
var rangeSlider = function () {
  $(".range-slider").each(function () {
    const $range = $(this).find(".rs");
    const $valueDisplay = $(this).find(".range-slider__value");
    const $container = $(this).find(".slider-container");
    
    const min = parseInt($range.attr("min"));
    const max = parseInt($range.attr("max"));
    
    // 初始化值和进度条
    let currentValue = parseInt($range.attr("value"));
    let percentage = ((currentValue - min) / (max - min)) * 100;
    $valueDisplay.text(currentValue);
    $container.css("--slider-value", percentage);

    // 滑块拖动时更新
    $range.on("input", function () {
      currentValue = parseInt(this.value);
      percentage = ((currentValue - min) / (max - min)) * 100;
      
      $valueDisplay.text(currentValue);
      $container.css("--slider-value", percentage);
    });
  });
};
rangeSlider();

关键说明 #

• Chromium内核没有原生的已滑动区域伪元素，必须通过容器+CSS变量的方式模拟进度条
• 保留Firefox的::-moz-range-progress，利用原生特性避免额外计算
• 确保全局定义--orangeclr、--ltgray、--black等CSS变量，否则颜色样式会失效

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