30: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; }31:[] 2e:{"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"},{"id":88,"value":"To use in your notebook:\n\n~~~js\nimport {Scrubber} from \"@jheer/scrubber\"\n~~~","pinned":false,"hidden":false,"mode":"md"},{"id":95,"value":"## Example","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":99,"value":"The current value of `rot` is _${rot.toFixed(1)}_.","pinned":false,"hidden":false,"mode":"md"},{"id":97,"value":"## Code","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}