2d:null 2e:["$","title",null,{"children":"Inline multi-slider | Sam Petulla | Observable"}] 33:[] 31:{"id":"07dc8878ce51c387","slug":"inline-multi-slider","title":"Inline multi-slider","thumbnail":"67914c348a3b4e46a7cedc17afe7f2ede222458aa7052823d5c32e2bd4050cfd","access_level":"public","create_time":"$D2020-10-22T02:44:13.331Z","update_time":"$D2020-10-23T20:31:45.459Z","view_time":null,"first_public_time":"$D2020-10-22T13:54:46.221Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"a1d2f0b1e0240795","login":"petulla","name":"Sam Petulla ","avatar_url":"https://avatars-next.observableusercontent.com/e405f5d54370de22a4969a8b1637770aeb0f11a8d43bdfc4ccf1e2e362b8ed42","tier":"starter_2024"},"version":236,"publish_version":236,"role":null,"authored":false,"authors":[{"type":"individual","id":"7d6aa91b0d5f9e4d","login":"petulla","name":"Sam Petulla ","avatar_url":"https://avatars-next.observableusercontent.com/e405f5d54370de22a4969a8b1637770aeb0f11a8d43bdfc4ccf1e2e362b8ed42","tier":null}],"members":[{"type":"individual","id":"7d6aa91b0d5f9e4d","login":"petulla","name":"Sam Petulla ","avatar_url":"https://avatars-next.observableusercontent.com/e405f5d54370de22a4969a8b1637770aeb0f11a8d43bdfc4ccf1e2e362b8ed42","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":{"id":"ee5ba50e27794e06","slug":"observable-techniques","title":"Observable techniques","owner":{"id":"a1d2f0b1e0240795","login":"petulla","name":"Sam Petulla "}},"type":"notebook","body":{"title":"Inline multi-slider","cells":[{"id":0,"value":"md`# Inline multi-slider`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"md`I needed one of these... Ty @fil for the help.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"bind(html`

\n ${tex`cx`}
\n ${tex`cy`}
\n ${tex`rx`}
\n ${tex`ry`}\n \n `, viewof ellipse)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"md`## Bin`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"function bind(form, view) {\n\n const output = form.querySelector(\"output\");\n \n const update = () => { \n form.value = {\n cx: view.value.cx,\n cy: view.value.cy,\n rx: view.value.rx,\n ry: view.value.ry\n };\n \n output.innerHTML = \"\";\n output.appendChild(tex`${texMatrix([[form.cx.valueAsNumber, \n form.cy.valueAsNumber], \n [form.rx.valueAsNumber, \n form.ry.valueAsNumber]])}`)\n };\n \n form.oninput = () => {\n view.value = {\n cx: form.cx.valueAsNumber,\n cy: form.cy.valueAsNumber,\n rx: form.rx.valueAsNumber,\n ry: form.ry.valueAsNumber\n }\n };\n \n view.addEventListener(\"input\", update);\n disposal(form).then(() => view.removeEventListener(\"input\", update));\n \n return update(), form\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"viewof ellipse = new View({\n cx: start.cx,\n cy: start.cy,\n rx: start.rx,\n ry: start.ry\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"md`#### Setup`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"start = {\n return {\n cx: 180,\n cy: 180,\n rx: 160,\n ry: 160\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"import {texMatrix} from '@tonyhschu/linear-algebra-homework-matrix-matrix-multiplication'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"nj = require('https://cdn.jsdelivr.net/gh/nicolaspanel/numjs@0.15.1/dist/numjs.min.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"import {disposal} from \"@mbostock/disposal\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"import {View} from \"@mbostock/synchronized-views\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"