Slider

/** Convenience wrapper around slider controls: There should be an <input id=$elementId type=range ...> and there can be any number of <span class=$elementId> to receive the output values */ class Slider { constructor(elementId, callback) { const update = () => { this.value = this.slider.valueAsNumber; this.updateOutputs(); callback(); }; this.elementId = elementId; this.slider = document.getElementById(elementId); this.slider.addEventListener('change', update, false); this.slider.addEventListener('input', update, false); this.digits = 2; this.value = this.slider.valueAsNumber; } updateOutputs() { for (let el of document.querySelectorAll("." + this.elementId)) { el.textContent = this.value.toFixed(this.digits); } } }