30:Ta1a,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; }31:[] 2e:{"title":"Mood sliders","cells":[{"id":0,"value":"md`# Mood sliders\n\n😁😐😔`","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"viewof m = mood({ scale: Math.floor(width / 100) })","pinned":true,"hidden":false,"mode":"ojs"},{"id":224,"value":"md`Slider value: ${m.toFixed(3)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":314,"value":"md`Sliders for setting your mood! These are tributes to [Susan Kare’s original work](https://kare.com/) - I was leafing through her [Icons](http://kareprints.com/susan-kare-iconsart-book/) art book, and found this example, and immediately needed to recreate it.\n\nThese are also the testing ground for a more mobile-friendly but still native-feeling slider design. They use an offscreen native HTML5 input type=range element so that they can support the full range of keyboard shortcuts left, right, up, down, are all supported, as well as special combinations like function-left to move the range immediately to the left or right. There are a surprising number of subtle affordances in native inputs like range sliders, and to create a good drop-in replacement, it’s important to replicate as many as possible.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":184,"value":"viewof ms = mood({ scale: 2, min: 100, max: 200, value: 150, step: 10 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":226,"value":"md`Slider value: ${ms}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":349,"value":"md`---\n\n## Usage\n\nYou can use these sliders for your own notebooks!\n\n\\`\\`\\`js\nimport {mood} from \"@tmcw/mood\";\n\\`\\`\\`\n\nThe slider API is:\n\n- min, max, value, step: same meanings as they have with [the native HTML5 input type=range element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range)\n- scale: pixel scale, to customize how big the slider looks. To try out scale, try dragging the slider below, which will scale the slider below it.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":360,"value":"viewof scale = mood({ scale: 2, min: 1, max: 9, step: 1 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":362,"value":"mood({ scale, min: 1, max: 3 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"d3 = require(\"d3-drag\", \"d3-selection\", \"d3-scale\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"faces = [\n \"iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAgMAAABinRfyAAAAAXNSR0IArs4c6QAAAAlQTFRFAAAAAAAAu9z/SuedrwAAAAF0Uk5TAEDm2GYAAABCSURBVAjXY2BgDWBgYIhaysDAuGqVAwPbqlUTGKRWrVrCIDULSGTNWraSIWsVmFgFJaSmgWRXZi2BKAZrAxsAMgoANvobDv/jC44AAAAASUVORK5CYII=\",\n \"iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAgMAAABinRfyAAAAAXNSR0IArs4c6QAAAAlQTFRFAAAAAAAA8PX/cm5gZQAAAAF0Uk5TAEDm2GYAAAA/SURBVAjXTYyxEQAQEARXQBGqUYJYCaoRi58ZV6VBItnk9hZ8BsoAJyWC1IiSEfs0ap+LKv146yj25Hu7gZPaN0YbDoLIW2UAAAAASUVORK5CYII=\",\n\n \"iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAgMAAABinRfyAAAAAXNSR0IArs4c6QAAAAlQTFRFAAAAAAAA//6Kuql7IAAAAAF0Uk5TAEDm2GYAAAA3SURBVAjXY2BgDWBgYIhaysDAuGqVAwPbqlUTGKRmLVsCIbJWrVqJTkBkl0YtgSgGawMbADIKADRSGvoHpf39AAAAAElFTkSuQmCC\"\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"gutter =\n \"iVBORw0KGgoAAAANSUhEUgAAAEAAAAAEBAMAAADMjiSXAAAAAXNSR0IArs4c6QAAAA9QTFRFAAAAICAge3t7urq66Ojo/zP4gwAAAAF0Uk5TAEDm2GYAAAAfSURBVAgdY2AQxAsYGJiM8QIFBiYXvECBgUEJL2AAAK4CFDGLIjiBAAAAAElFTkSuQmCC\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":326,"value":"focusImage =\n \"iVBORw0KGgoAAAANSUhEUgAAABIAAAASAQMAAABsABwUAAAAAXNSR0IArs4c6QAAAAZQTFRFAAAA7e3tMTbpWAAAAAF0Uk5TAEDm2GYAAAApSURBVAjXY2B8wMDA/oOBQf4fA4P9fwiu/98AxugAJg5TB9ID0gs0AwCqlBLrgpfSvQAAAABJRU5ErkJggg==\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}