2d:null 2e:["$","title",null,{"children":"Synchronized Slider | Nikita Sharov | Observable"}] 33:T563,customSlider = (options = {}) => { const { title, min = 0, max = 1, value = (min + max) / 2, step = "any", precision = 2, format, description } = options; const slider = html`

`; const id = Date.now(); if (title) { // hovering the label highlights / clicking the label gives focus to the associated input slider.append(html`${title}`); } const input = html``; slider.append(input); const output = html``; slider.append(output); if (description) { slider.append(html`${description}`); } // slider is the EventTarget for external cells to dispatch input events on slider.addEventListener("input", (e) => { const roundedValue = round(slider.value, precision); slider.value = roundedValue; input.value = roundedValue; output.innerText = format ? format(roundedValue) : roundedValue; }); input.addEventListener("input", () => { slider.value = round(input.valueAsNumber, precision); slider.dispatchEvent(new CustomEvent("input")); }); // set initial value input.dispatchEvent(new CustomEvent("input")); return slider; }34:[] 31:{"id":"c860373a952aaf87","slug":"synchronized-slider","title":"Synchronized Slider","thumbnail":"5dd5d62d34cf1f7b53aaeacb8e8ca2ed3a6698426249926942459a07758ccd98","access_level":"public","create_time":"$D2020-08-31T08:42:27.254Z","update_time":"$D2021-02-06T14:22:18.967Z","view_time":null,"first_public_time":"$D2020-08-31T17:55:25.088Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"6c49d8d38db08400","login":"nikita-sharov","name":"Nikita Sharov","avatar_url":"https://avatars-next.observableusercontent.com/544afb614871e9f3bee546cbff7e689f2a454464b16ac434007893bde877f2df","tier":"starter_2024"},"version":508,"publish_version":508,"role":null,"authored":false,"authors":[{"type":"individual","id":"ee7c67b988c5530c","login":"nikita-sharov","name":"Nikita Sharov","avatar_url":"https://avatars-next.observableusercontent.com/544afb614871e9f3bee546cbff7e689f2a454464b16ac434007893bde877f2df","tier":null}],"members":[{"type":"individual","id":"ee7c67b988c5530c","login":"nikita-sharov","name":"Nikita Sharov","avatar_url":"https://avatars-next.observableusercontent.com/544afb614871e9f3bee546cbff7e689f2a454464b16ac434007893bde877f2df","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"07bb977f19c87075","slug":"observable","title":"Observable","owner":{"id":"6c49d8d38db08400","login":"nikita-sharov","name":"Nikita Sharov"}},"type":"notebook","body":{"title":"Synchronized Slider","cells":[{"id":0,"value":"md`# Synchronized Slider\n\nTrying to update a`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":363,"value":"md`by another input and vice versa. Looking like a mission critical bug report, being a rhetorical feature request.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"md`---\n## Expected behaviour\n\nBased on: [@mbostock/views-are-mutable-values](https://observablehq.com/@mbostock/views-are-mutable-values)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"viewof nativeSlider = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"nativeSlider","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"updateButton = (slider) => {\n const button = html``\n button.addEventListener(\"click\", () => {\n slider.value = Math.random();\n slider.dispatchEvent(new CustomEvent(\"input\"));\n });\n \n return button;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"updateButton(viewof nativeSlider)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"md`---\n## Actual behaviour\n\nMoving the slider updates the *value* of the slider. Approved. The button does not update the slider. Not approved!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"viewof fancySlider = slider({\n title: \"Fancy slider\",\n description: \"As a combination of multiple HTML elements within a form\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"fancySlider","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"updateButton(viewof fancySlider)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"md`---\n## Potential solutions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"md`### 1. Time is money\n\nA slider revealing its exact (numeric, in this case) value counts as fancy too:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"viewof anotherFancySlider = slider()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"anotherFancySlider","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"{\n const button = html``; \n button.addEventListener(\"click\", () => {\n // anotherFancySlider is actually a form, holding an input (i.a.)\n viewof anotherFancySlider.input.value = Math.random();\n viewof anotherFancySlider.dispatchEvent(new CustomEvent(\"input\"));\n });\n \n return button;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":325,"value":"md`That’s it. Waste your time elsewhere, please.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":428,"value":"viewof doublingSlider = {\n const secondarySlider = happyCaseSlider({ value: viewof anotherFancySlider.value });\n secondarySlider.addEventListener(\"input\", (e) => {\n // avoid endless loops\n if (e.detail !== \"ignore\") {\n viewof anotherFancySlider.input.value = secondarySlider.value;\n viewof anotherFancySlider.dispatchEvent(new CustomEvent(\"input\"));\n }\n });\n\n viewof anotherFancySlider.addEventListener(\"input\", () => {\n secondarySlider.input.value = viewof anotherFancySlider.value;\n secondarySlider.dispatchEvent(new CustomEvent(\"input\", { detail: \"ignore\" }));\n });\n \n return secondarySlider;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":441,"value":"doublingSlider","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"md`#### Pathfinder\n\nFollowing the execution path of [@jashkenas/inputs#slider](https://observablehq.com/@jashkenas/inputs#slider) with zero configuration (falling back to the default values) and aggressive optimization, leaving the ~~wounded~~ ineffective statements behind:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"happyCaseSlider = () => \n happyCaseInput({\n type: \"range\",\n attributes: { \n min: 0, \n max: 1,\n step: \"any\",\n value: 0.5 \n },\n getValue: input => Math.round(input.valueAsNumber * 100) / 100\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"function happyCaseInput(config) {\n let {\n type,\n attributes,\n getValue\n } = config;\n\n // named form elements are accessible as form.name\n const form = html`\n`;\n \n for (const [key, val] of Object.entries(attributes)) {\n form.input.setAttribute(key, val);\n }\n \n // inline styles extracted (not feasible for an export-oriented solution)\n form.append(html``);\n \n const verb = \"oninput\"; \n form[verb] = e => {\n const value = getValue(form.input);\n form.output.value = value;\n form.value = value;\n };\n \n form[verb](); \n return form;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"md`### 2. Basic research\n\nA reinvention of the ~~wheel~~ happy case slider, meeting the initial expectations, without dependencies:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"viewof lastSlider = customSlider({\n title: \"Happy case\",\n value: 0.75,\n format: d => `${Math.round(d * 100)}%`,\n description: \"We are almost there\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"lastSlider","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"updateButton(viewof lastSlider)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":503,"value":"md`---\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"round = (number, precision) => {\n const magicRatio = Math.pow(10, precision); // see: https://stackoverflow.com/a/11832950\n return Math.round((number + Number.EPSILON) * magicRatio) / magicRatio;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"round(0.1679477857769509, 2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"