<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>
Copy to clipboard