43 lines
1.3 KiB
JavaScript
43 lines
1.3 KiB
JavaScript
|
// regular slider
|
||
|
|
|
||
|
|
var slider = document.getElementById("sliderRegular");
|
||
|
|
if (slider) {
|
||
|
|
noUiSlider.create(slider, {
|
||
|
|
start: 40,
|
||
|
|
connect: [true, false],
|
||
|
|
range: {
|
||
|
|
min: 0,
|
||
|
|
max: 100,
|
||
|
|
},
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// Rounded slider
|
||
|
|
|
||
|
|
if (document.querySelector("round-slider")) {
|
||
|
|
const setValue = function (value, active) {
|
||
|
|
document.querySelectorAll("round-slider").forEach(function (el) {
|
||
|
|
if (el.value === undefined) return;
|
||
|
|
el.value = value;
|
||
|
|
});
|
||
|
|
const span = document.querySelector("#value");
|
||
|
|
span.innerHTML = value;
|
||
|
|
if (active) span.style.color = "red";
|
||
|
|
else span.style.color = "black";
|
||
|
|
};
|
||
|
|
|
||
|
|
document.querySelectorAll("round-slider").forEach(function (el) {
|
||
|
|
el.addEventListener("value-changed", function (ev) {
|
||
|
|
if (ev.detail.value !== undefined) setValue(ev.detail.value, false);
|
||
|
|
else if (ev.detail.low !== undefined) setLow(ev.detail.low, false);
|
||
|
|
else if (ev.detail.high !== undefined) setHigh(ev.detail.high, false);
|
||
|
|
});
|
||
|
|
|
||
|
|
el.addEventListener("value-changing", function (ev) {
|
||
|
|
if (ev.detail.value !== undefined) setValue(ev.detail.value, true);
|
||
|
|
else if (ev.detail.low !== undefined) setLow(ev.detail.low, true);
|
||
|
|
else if (ev.detail.high !== undefined) setHigh(ev.detail.high, true);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|