javascript - 价格范围 slider 在 mozilla 浏览器中不起作用，但在 chrome 和 opera 浏览器中起作用

Question

我使用 html、css 和 javascript 创建了价格范围 slider 。它在 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>

Answer 1

您已经为范围 slider 使用了 Webkit 特定的前缀伪元素样式。

::-webkit-slider-thumb

但没有考虑到 Mozilla 和 Microsoft 有自己的前缀:

::-moz-range-thumb

::-ms-thumb

您至少必须实现 Mozilla 版本，但应考虑同时实现这两个版本。

从有关此技术的 MDN 站点，点击此链接以获得正确实现的跨浏览器 slider :https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/

input[type=range] {
  -webkit-appearance: none;
  margin: 18px 0;
  width: 100%;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #3071a9;
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -14px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #367ebd;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #3071a9;
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  border-width: 16px 0;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #2a6495;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
  background: #3071a9;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  background: #3071a9;
}
input[type=range]:focus::-ms-fill-upper {
  background: #367ebd;
}

<input type="range" min="0" max="100" step="5" value="50"/>

然后修改 CSS 以满足您的需求。