73 lines
2.2 KiB
JavaScript
73 lines
2.2 KiB
JavaScript
document.addEventListener("DOMContentLoaded",function(){
|
|
let ranges = [
|
|
new RangePill("#range1","orange"),
|
|
new RangePill("#range2","yellow"),
|
|
new RangePill("#range3","blue"),
|
|
new RangePill("#range4","white","orange"),
|
|
new RangePill("#range5","white","yellow"),
|
|
new RangePill("#range6","white","blue"),
|
|
new RangePill("#range7","orange","yellow"),
|
|
new RangePill("#range8","blue","orange"),
|
|
new RangePill("#range9","yellow","blue"),
|
|
new RangePill("#range10","yellow","orange"),
|
|
new RangePill("#range11","orange","blue"),
|
|
new RangePill("#range12","blue","yellow")
|
|
];
|
|
});
|
|
|
|
class RangePill {
|
|
constructor(qs,thumbColor = "orange",trackColor = "white") {
|
|
this.el = document.querySelector(qs);
|
|
this.fill = null;
|
|
this.value = null;
|
|
|
|
if (this.el) {
|
|
this.buildSlider(thumbColor,trackColor);
|
|
this.el.addEventListener("input",this.changeValue.bind(this));
|
|
}
|
|
}
|
|
buildSlider(thumbColor,trackColor) {
|
|
this.el.className = "range-pill__input";
|
|
// create a div to contain the <input>
|
|
let rangeWrap = document.createElement("span");
|
|
rangeWrap.className = "range-pill";
|
|
// thumb and track colors
|
|
if (thumbColor)
|
|
rangeWrap.classList.add(`range-pill--${thumbColor}-thumb`);
|
|
if (trackColor)
|
|
rangeWrap.classList.add(`range-pill--${trackColor}-track`);
|
|
this.el.parentElement.insertBefore(rangeWrap,this.el);
|
|
// input
|
|
rangeWrap.appendChild(this.el);
|
|
// range fill
|
|
let rangeFill = document.createElement("span");
|
|
rangeFill.className = "range-pill__fill";
|
|
rangeWrap.appendChild(rangeFill);
|
|
// range value
|
|
let rangeValue = document.createElement("span");
|
|
rangeValue.className = "range-pill__value";
|
|
rangeValue.textContent = this.el.value;
|
|
rangeWrap.appendChild(rangeValue);
|
|
// initial value
|
|
this.fill = rangeFill;
|
|
this.value = rangeValue;
|
|
this.changeValue();
|
|
}
|
|
changeValue() {
|
|
// keep the value within range
|
|
if (+this.el.value > this.el.max)
|
|
this.el.value = this.el.max;
|
|
else if (+this.el.value < this.el.min)
|
|
this.el.value = this.el.min;
|
|
// width of fill
|
|
if (this.fill) {
|
|
let pct = (this.el.value - this.el.min) / (this.el.max - this.el.min),
|
|
fillWidth = pct * 100;
|
|
|
|
this.fill.style.width = `${fillWidth}%`;
|
|
}
|
|
// value
|
|
if (this.value)
|
|
this.value.textContent = this.el.value;
|
|
}
|
|
} |