2b:null 2c:["$","title",null,{"children":"Multiple inputs in a cell | Steffen Hänsch | Observable"}] 31:[] 2f:{"id":"2eb02f25e302f8e3","slug":"multiple-inputs-in-a-cell","title":"Multiple inputs in a cell","thumbnail":"3c26897307babd7dd0e7bc9eecdd41e6de46a81e3b478f481882965aabcf75d5","access_level":"public","create_time":"$D2018-06-04T15:48:09.551Z","update_time":"$D2021-01-12T12:22:58.934Z","view_time":null,"first_public_time":"$D2018-06-05T11:59:49.277Z","fork":false,"stars":6,"starred":false,"owner":{"type":"team","id":"9f0a5778a9e93283","login":"s-haensch","name":"Steffen Hänsch","avatar_url":"https://avatars-next.observableusercontent.com/f8ae573e8ef3303795b5c307e85b49753b498e72abbb8e91b0f4ba73e7327515","tier":"starter_2024"},"version":170,"publish_version":170,"role":null,"authored":false,"authors":[{"type":"individual","id":"54a3b46988329fc4","login":"s-haensch","name":"Steffen Hänsch","avatar_url":"https://avatars-next.observableusercontent.com/f8ae573e8ef3303795b5c307e85b49753b498e72abbb8e91b0f4ba73e7327515","tier":null}],"members":[{"type":"individual","id":"54a3b46988329fc4","login":"s-haensch","name":"Steffen Hänsch","avatar_url":"https://avatars-next.observableusercontent.com/f8ae573e8ef3303795b5c307e85b49753b498e72abbb8e91b0f4ba73e7327515","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":4,"collection":{"id":"3bd185df43ed4429","slug":"util","title":"Documentation","owner":{"id":"9f0a5778a9e93283","login":"s-haensch","name":"Steffen Hänsch"}},"type":"notebook","body":{"title":"Multiple inputs in a cell","cells":[{"id":0,"value":"md`\n# Multiple inputs in a cell\na.k.a dashboard cells. See https://beta.observablehq.com/@mbostock/multi-value-inputs\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":105,"value":"md`\n### input / view seperation\ncan use values in multiple other cells\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":69,"value":"viewof rgb = {\n const form = html``;\n form.oninput = () => {form.value = [\n form.r.valueAsNumber, \n form.g.valueAsNumber, \n form.b.valueAsNumber\n ];}\n form.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":103,"value":"rgb","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":84,"value":"rect = html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":139,"value":"circle = html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":107,"value":"md`\n### self-contained cell\ncan be required in other notebooks as completely standalone cells\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":88,"value":"selfContained = () => {\n const box = html`

`\n const form = html``;\n form.oninput = () => {\n const r = form.r.valueAsNumber;\n const g = form.g.valueAsNumber;\n const b = form.b.valueAsNumber;\n\n box.style.background = `rgb(${r},${g},${b})`\n box.style.borderRadius = `${form.shape.checked === true ? '50%' : '0%'}`\n }\n form.oninput();\n return html`${form}${box}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":153,"value":"dashboard = selfContained()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"