mood = ({ min = 0, max = 1, scale = 4, value = 1, step = "any" } = {}) => { const ui = html`

`; const uis = d3.select(ui); const knob = uis.select(".knob"); const focus = uis.select(".focus"); const g = uis.select(".gutter"); const nativeInput = uis.select("input"); const s = d3 .scaleLinear() .domain([0, 1]) .range([min, max]) .nice(); let sx; let setValue = l => { let v = s(l); nativeInput.node().value = v; v = nativeInput.node().valueAsNumber; ui.value = v; const normalized = s.invert(v); const face = Math.floor(normalized * 2.9999); ui.dispatchEvent(new CustomEvent("input")); knob.attr("src", `data:image/png;base64,${faces[face]}`); knob.style("left", `${normalized * 64 * scale}px`); focus.style("left", `${(normalized * 64 - 1) * scale}px`); }; const nativeToUI = () => setValue(s.invert(d3.event.target.value)); const drag = d3 .drag() .on("start", () => { sx = d3.event.sourceEvent.layerX; }) .on("drag", () => { setValue( Math.min(Math.max(0, d3.event.x - sx), 64 * scale) / (64 * scale) ); }); g.on("click", () => { setValue(d3.event.layerX / (scale * 64)); }); setValue(s.invert(value)); uis.select("div").on("focus", () => nativeInput.node().focus()); nativeInput.on("input.nativecontrols", nativeToUI); nativeInput.on("focus", () => { focus.style("display", "block"); }); nativeInput.on("blur", () => { focus.style("display", "none"); }); focus.style("display", "none"); knob.call(drag); return ui; }