2d:null 2e:["$","title",null,{"children":"Scrubber | Jeffrey Heer | Observable"}] 33:Tdc7,function Scrubber(extent, { format = Inputs.formatTrim, value = extent[0], delay = 30, step = 1, autoplay = false, loop = true, loopDelay = null, alternate = false, label = null, labelWidth = '100px' } = {}) { const values = d3.range(extent[0], extent[1] + step, step); const form = html``; let frame = null; let timer = null; let interval = null; let direction = 1; function start() { form.b.innerHTML = '

' if (delay === null) frame = requestAnimationFrame(tick); else interval = setInterval(tick, delay); } function stop() { form.b.innerHTML = '

'; if (frame !== null) cancelAnimationFrame(frame), frame = null; if (timer !== null) clearTimeout(timer), timer = null; if (interval !== null) clearInterval(interval), interval = null; } function running() { return frame !== null || timer !== null || interval !== null; } function tick() { if (form.i.valueAsNumber === (direction > 0 ? values.length - 1 : direction < 0 ? 0 : NaN)) { if (!loop) return stop(); if (alternate) direction = -direction; if (loopDelay !== null) { if (frame !== null) cancelAnimationFrame(frame), frame = null; if (interval !== null) clearInterval(interval), interval = null; timer = setTimeout(() => (update(), start()), loopDelay); return; } } if (delay === null) frame = requestAnimationFrame(tick); update(); } function update() { form.i.valueAsNumber = (form.i.valueAsNumber + direction + values.length) % values.length; form.i.dispatchEvent(new CustomEvent("input", {bubbles: true})); } function valuesIndex(v) { return d3.bisectLeft(values, v); } Object.defineProperty(form, 'value', { get() { return value; }, set(v) { if (isFinite(v)) { value = v; form.i.valueAsNumber = valuesIndex(v); form.o.value = format(form.value, form.i.valueAsNumber, values); } } }); form.i.oninput = event => { if (event && event.isTrusted && running()) stop(); value = values[form.i.valueAsNumber]; form.o.value = format(form.value, form.i.valueAsNumber, values); }; form.b.onclick = () => { if (running()) return stop(); direction = alternate && form.i.valueAsNumber === values.length - 1 ? -1 : 1; form.i.valueAsNumber = (form.i.valueAsNumber + direction) % values.length; form.i.dispatchEvent(new CustomEvent("input", {bubbles: true})); start(); }; form.i.oninput(); if (autoplay) start(); else stop(); Inputs.disposal(form).then(stop); return form; }34:[] 31:{"id":"fee23113512aa91a","slug":"scrubber","title":"Scrubber","thumbnail":"abeccf58de2c6e8157800420eecfeae266f87444f108552293517d52fb741cc2","access_level":"public","create_time":"$D2022-10-01T23:07:13.884Z","update_time":"$D2022-10-03T21:10:14.390Z","view_time":null,"first_public_time":"$D2022-10-01T23:21:44.101Z","has_unpublished_edits":null,"fork":false,"stars":13,"starred":false,"owner":{"type":"team","id":"082c3d8198c3fcdc","login":"jheer","name":"Jeffrey Heer","avatar_url":"https://avatars-next.observableusercontent.com/230cea705fbda819b9f6b8bc87e05ebecf06d314098901fbd9946af2cdc51be4","tier":"starter_2024"},"version":110,"publish_version":110,"role":null,"authored":false,"authors":[{"type":"individual","id":"ecf15dc33ed8cd37","login":"jheer","name":"Jeffrey Heer","avatar_url":"https://avatars-next.observableusercontent.com/230cea705fbda819b9f6b8bc87e05ebecf06d314098901fbd9946af2cdc51be4","tier":null}],"members":[{"type":"individual","id":"ecf15dc33ed8cd37","login":"jheer","name":"Jeffrey Heer","avatar_url":"https://avatars-next.observableusercontent.com/230cea705fbda819b9f6b8bc87e05ebecf06d314098901fbd9946af2cdc51be4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"Scrubber","cells":[{"id":0,"value":"# Scrubber\n\nA range input with playback functionality, with options similar to `Inputs.range`.\nAdapted from [@mbostock/scrubber](https://observablehq.com/@mbostock/scrubber).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":88,"value":"To use in your notebook:\n\n~~~js\nimport {Scrubber} from \"@jheer/scrubber\"\n~~~","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":95,"value":"## Example","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"viewof rot = Scrubber([0, 360], { step: 0.5, value: 45, delay: 100, label: 'Rotation', format: x => x.toFixed(1) })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"The current value of `rot` is _${rot.toFixed(1)}_.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":97,"value":"## Code","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"