Ad

Price Range Slider Not Working In Mozzila Browser But Working In Chrome & Opera Browser

- 1 answer

I've created price range slider by using html, css & javascript. It is working perfectly in google chrome and opera browser but not working in mozzila firefox browser.

See below mention screenshot what I got when I tried to run this in mozzila firefox browser. I'm unable to identify the issue.

I'm unable to add image here but here is the image link : Screenshot of the issue

Please anyone can help me to resolve this 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 target="_blank" rel="nofollow noreferrer" 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>

Ad

Answer

You've used Webkit specific prefix pseudo element styling for the range slider.

::-webkit-slider-thumb

but failed to take into account that Mozilla and Microsoft have their own prefixes:

::-moz-range-thumb

::-ms-thumb

At a minimum you must implement the Mozilla version, but should consider implementing both.

From the MDN site about this tech, follow this link for a correctly implemented cross-browser 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"/>

Then modify the CSS to accommodate your needs.

Ad
source: stackoverflow.com
Ad