Слайдер ценового диапазона не работает в браузере Mozzila, но работает в браузере Chrome и Opera - PullRequest
Новая
       21

Слайдер ценового диапазона не работает в браузере Mozzila, но работает в браузере Chrome и Opera

0 голосов
/ 29 июня 2019

Я создал слайдер ценового диапазона, используя html, css & javascript. Он отлично работает в браузере Google Chrome и Opera, но не работает в браузере Mozzila Firefox.

Смотрите скриншот ниже, что я получил, когда попытался запустить его в браузере Mozzila Firefox. Я не могу определить проблему.

Я не могу добавить изображение сюда, но вот ссылка на изображение: Снимок экрана проблемы

Пожалуйста, кто-нибудь может помочь мне решить эту проблему? 

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

Ответы [ 2 ]

0 голосов
/ 29 июня 2019

Спасибо всем вам за помощь, я решил проблему, и теперь она отлично работает для всех браузеров, кроме IE, но кому это нужно.

Смотрите здесь рабочую демонстрацию: 

var rangeOne = document.querySelector('input[name="rangeOne"]'),
    rangeTwo = document.querySelector('input[name="rangeTwo"]'),
    updatedMinPrice = document.querySelector('input[name="updatedMinPrice"]'),
    updatedMaxPrice = document.querySelector('input[name="updatedMaxPrice"]'),
    outputOne = document.querySelector('.outputOne'),
    outputTwo = document.querySelector('.outputTwo'),
    minprice = document.querySelector('.minprice'),
    maxprice = document.querySelector('.maxprice'),
    inclRange = document.querySelector('.incl-range'),
    updateView = function () {
        if (this.getAttribute('name') === 'rangeOne') {
            outputOne.innerHTML = this.value + ' ₹';
            minprice.innerHTML = '₹ ' + this.value;
            updatedMinPrice.value = this.value;
            outputOne.style.left = this.value / this.getAttribute('max') * 100 + '%';
        } else {
            outputTwo.style.left = this.value / this.getAttribute('max') * 100 + '%';
            outputTwo.innerHTML = this.value + ' ₹';
            maxprice.innerHTML = '₹ ' + this.value;
            updatedMaxPrice.value = this.value;
        }
        if (parseInt(rangeOne.value) > parseInt(rangeTwo.value)) {
            inclRange.style.width = (rangeOne.value - rangeTwo.value) / this.getAttribute('max') * 100 + '%';
            inclRange.style.left = rangeTwo.value / this.getAttribute('max') * 100 + '%';
        } else {
            inclRange.style.width = (rangeTwo.value - rangeOne.value) / this.getAttribute('max') * 100 + '%';
            inclRange.style.left = rangeOne.value / this.getAttribute('max') * 100 + '%';
        }
    };

document.addEventListener('DOMContentLoaded', function () {
    updateView.call(rangeOne);
    updateView.call(rangeTwo);
    $('input[type="range"]').on('mouseup', function () {
        this.blur();
    }).on('mousedown input', function () {
        updateView.call(this);
    });
});
/* Custom price range slider created by Pawan Mall | www.pawanmall.net */
.hideme{
  display:none !important;
}
.range-slider {
  position: relative;
  top: -10px;
  width: 100%;
  height: 35px;
  text-align: center;
}

.range-slider input {
  pointer-events: none;
  position: absolute;
  overflow: hidden;
  left: 0;
  top: 15px;
  width: 100%;
  outline: none;
  height: 18px;
  margin: 0;
  padding: 0;
}

.range-slider input::-webkit-slider-thumb {
  pointer-events: all;
  position: relative;
  z-index: 1;
  outline: 0;
}

.range-slider input::-moz-range-thumb {
  pointer-events: all;
  position: relative;
  z-index: 10;
  -moz-appearance: none;
  width: 9px;
}

.range-slider input::-moz-range-track {
  position: relative;
  z-index: -1;
  background-color: rgba(0, 0, 0, 1);
  border: 0;
}

.range-slider input:last-of-type::-moz-range-track {
  -moz-appearance: none;
  background: none transparent;
  border: 0;
}

.range-slider input[type=range]::-moz-focus-outer {
  border: 0;
}

.rangeValue {
  width: 30px;
}

.output {
  position: absolute;
  border: 1px solid #999;
  width: 55px;
  padding: 0 10px;
  height: 30px;
  text-align: center;
  color: #999;
  border-radius: 4px;
  display: inline-block;
  font: bold 15px/30px Helvetica, Arial;
  bottom: 75%;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}

.output.outputTwo {
  left: 100%;
}

input[type=range] {
  -webkit-appearance: none;
  background: none;
}

input[type=range]::-webkit-slider-runnable-track {
  height: 5px;
  border: none;
  border-radius: 3px;
  background: transparent;
}

input[type=range]::-ms-track {
  height: 5px;
  background: transparent;
  border: none;
  border-radius: 3px;
}

input[type=range]::-moz-range-track {
  height: 5px;
  background: transparent;
  border: none;
  border-radius: 3px;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: #dc3545;
  margin-top: -5px;
  position: relative;
  z-index: 10000;
}

input[type=range]::-ms-thumb {
  -webkit-appearance: none;
  border: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: #dc3545;
  margin-top: -5px;
  position: relative;
  z-index: 10000;
}

input[type=range]::-moz-range-thumb {
  -webkit-appearance: none;
  border: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: #dc3545;
  margin-top: -5px;
  position: relative;
  z-index: 10000;
  cursor: pointer;
}

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

.full-range,
.incl-range {
  width: 100%;
  height: 5px;
  left: 0;
  top: 21px;
  position: absolute;
  background: #DDD;
}

.incl-range {
  background: #dc3545;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container m-5 p-5">
  <div class="row mt-2 text-secondary">
    <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="output outputOne hideme"></span>
              <span class="output outputTwo hideme"></span>
              <span class="full-range"></span>
              <span class="incl-range"></span>
              <input name="rangeOne" value="0" min="0" max="250000" step="1"
                  type="range">
              <input name="rangeTwo" value="250000" min="0" max="250000" step="1"
                  type="range">
          </div>
          <input name="updatedMinPrice" type="hidden">
          <input name="updatedMaxPrice" type="hidden">
      </div>
  </div>
</div>
0 голосов
/ 29 июня 2019

Вы использовали стили псевдоэлемента для префикса Webkit для ползунка диапазона.

::-webkit-slider-thumb

, но не смогли учесть, что Mozilla и Microsoft имеют свои собственные префиксы:

::-moz-range-thumb

::-ms-thumb

Как минимум, вы должны реализовать версию Mozilla, но следует рассмотреть возможность реализации обоих.

На сайте MDN, посвященном этой технологии, перейдите по этой ссылке для правильно реализованного кросс-браузерного слайдера: https://css -tricks.com / styling-cross-browser-compatibility-range-controls-input-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 в соответствии с вашими потребностями.

...