Login
Ranges

Single Range Slider with input

12 Oct 2022

Single Range Slider with input
HTML
SCSS
JS 
                            <div class="single-range-container single-range-inputs">
  <div
          id="single-range-inputs"
          class="single-range"
          data-min="0"
          data-max="5000"
          data-unit="$"
          data-step="10"
  ></div>
  <div class="single-range-inputs__container">
    <span class="unit"></span>
    <input
            class="single-range-input"
            id="single-range-value-min"
            value="200"
            type="text"
    />
  </div>
</div>
                        
                            .single-range {
  padding-right: 15px;
  margin-bottom: 30px;
  height: 6px;
  border-radius: 12px;
  border: none;
  box-shadow: none;
  background: lightgrey;

  .noUi-connect {
    background: orange;
  }

  .noUi-handle {
    background: orange;
    width: 18px;
    height: 18px;
    border: 2px solid white;
    cursor: pointer;
    border-radius: 50%;
    box-shadow: none;

    &:before,
    &:after {
      content: none;
    }
  }
}

.single-range-inputs {
  &__container {
    display: flex;
    align-items: center;
  }

  .single-range-input {
    border: 1px solid orange;
    background: transparent;
    border-radius: 4px;
    padding: 6px 10px;
    width: 38%;
    line-height: 1.2;
    height: auto;
    color: white;

    &:focus {
      border: 1px solid blue;
    }
  }

  span {
    font-size: 16px;
    line-height: 1;
    color: white;

    &.unit {
      margin-right: 2px;
    }
  }
}
                        
                            const singleRangeSliderInputs = () => {
  const singleRange = document.getElementsByClassName("single-range-inputs")[0];
  if (singleRange) {
    const slider = singleRange.querySelector("#single-range-inputs");
    const max = +slider.dataset.max;
    const min = +slider.dataset.min;
    const unit = slider.dataset?.unit || "£";
    const step = +slider.dataset.step;
    const input = singleRange.querySelector(".single-range-input");
    const unitItem = singleRange.querySelector(".unit");
    const startValue = +input.value;

    noUiSlider.create(slider, {
      start: [startValue],
      connect: 'lower',
      margin: 10,
      step: step,
      range: {
        min: min,
        max: max,
      },
    });

    unitItem.textContent = unit;

    slider.noUiSlider.on("update", function (values) {
      input.value = Math.round(values);
    });

    input.addEventListener("input", function () {
      input.value = input.value.replace(/[^\d.]/g, "");
      slider.noUiSlider.set(input.value);
    });
  }
};
singleRangeSliderInputs();


На базі плагіна noUiSlider.

В data-атрибути вносяться мінімальне, максимальне значення, валюта, крок (на скільки в одному кроці буде мінятися значення).

В data-unit вноситься валюта, якщо потрібен фунт (£), то можна просто видалити цей атрибут, дефолтне значення - фунт.

Є інпут. Туди запусується значення яке вибирається в слайдері. Якщо ввести нове значення, автоматично слайдер оновиться.

nouislider.min.rar

0