Atom

Form Range

Default

Show code 
            
              <div class="form-range">
  <input class="form-range__input form-control form-range__input--low" min="0" max="100">
  <div class="form-range__slider">
    <input class="form-range__slider-input middle" type="range" value="10,90" js-multiple="" min="0" max="100" name="form-range">
  </div><input class="form-range__input form-control form-range__input--high" min="0" max="100">
</div>

Dynamic

Dynamically created Form Range's can be initialized by calling window.__katana__.initFormRange($ELEMENT), where $ELEMENT is the dom element (e.g. document.querySelector('.my-form-range'))

Show code 
            
              <div style="display: flex; flex-direction: column; gap: 30px;">
  <div id="test"></div><button id="dynamic-form-range">Add dynamic form range</button> 
  <script>

    document.getElementById("dynamic-form-range").addEventListener(
      "click", function () {
        var container = document.getElementById("test")

        container.innerHTML = `
          <div class="form-range">
            <input class="form-range__input form-control form-range__input--low" min="0" max="100">
            <div class="form-range__slider">
              <input class="form-range__slider-input middle" type="range" value="10,90" js-multiple="" min="0" max="100" name="form-range">
            <\/div><input class="form-range__input form-control form-range__input--high" min="0" max="100">
          <\/div>`

        var dynamicFormRange = container.querySelector(".form-range")

        window.__katana__.initFormRange(dynamicFormRange)

        document.getElementById("dynamic-form-range").setAttribute("disabled", "disabled")
      }

    )
  </script>
</div>