2b:null 2c:["$","title",null,{"children":"Vertical Sliders with current label above (the hacky way) | Frederik H. | Observable"}] 31:T5ef,function verticalSliders(config = {}) { const len = (arr) => arr ? arr.length : undefined; let { n = len(config.values) || len(config.mins) || len(config.maxs) || len(config.values) || len(config.names) || len(config.labels) || 1, mins = Array(n).fill(0), maxs = Array(n).fill(1), steps = Array(n).fill("any"), values = mins.map((min, idx) => (maxs[idx] + min) / 2), names = Array(n).fill(0).map((_, idx) => `${idx}`), labels = Array(n).fill(""), value_labels = Array(n).fill(0), } = config; return form(html`

${Array(n).fill(0).map((_, idx) => html` `)} ${labels.map(label => html``)}

${label}

`) }32:T484,function verticalSliderLabels(config = {}) { const len = (arr) => arr ? arr.length : undefined; let { n = len(config.values) || len(config.mins) || len(config.maxs) || len(config.values) || len(config.names) || len(config.labels) || 1, mins = Array(n).fill(0), maxs = Array(n).fill(1), steps = Array(n).fill("any"), values = mins.map((min, idx) => (maxs[idx] + min) / 2), names = Array(n).fill(0).map((_, idx) => `${idx}`), labels = Array(n).fill(""), value_labels = Array(n).fill(0), } = config; return form(html` ${Array(n).fill(0).map((_, idx) => html` `)}

${values[idx]}

`) }33:[] 2f:{"id":"5c426ec2fc7f2fbf","slug":null,"title":"Vertical Sliders with current label above (the hacky way)","thumbnail":"d900c26cd218603b350187c14559fc709d9f34e5d0e8560260adbb0c8cb64846","access_level":"public","create_time":"$D2023-01-30T00:28:49.299Z","update_time":"$D2023-01-30T16:51:32.224Z","view_time":null,"first_public_time":"$D2023-01-30T00:28:49.299Z","has_unpublished_edits":null,"fork":{"id":"92ff66b718c1972f","slug":"vertical-sliders","title":"Vertical Sliders","owner":{"id":"7db5ed2b0697d645","login":"tomlarkworthy","name":"Tom Larkworthy"}},"stars":0,"starred":false,"owner":{"type":"team","id":"0c6e428fcfacb73e","login":"frederikho","name":"Frederik H.","avatar_url":"https://avatars-next.observableusercontent.com/36a4e86dc1a09674c52d199af3572a310c9c2f1d3243df724a37fc4358939fad","tier":"starter_2024","bio":""},"version":194,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5fbb3523fc800f7b","login":"frederikho","name":"Frederik H.","avatar_url":"https://avatars-next.observableusercontent.com/36a4e86dc1a09674c52d199af3572a310c9c2f1d3243df724a37fc4358939fad","tier":null,"bio":""}],"members":[{"type":"individual","id":"5fbb3523fc800f7b","login":"frederikho","name":"Frederik H.","avatar_url":"https://avatars-next.observableusercontent.com/36a4e86dc1a09674c52d199af3572a310c9c2f1d3243df724a37fc4358939fad","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Vertical Sliders with current label above (the hacky way)","cells":[{"id":0,"value":"md`# Vertical Sliders with current label above (the hacky way)\n\nPut all your controls into a single row for less vertical scrolling\n\n~~~js\nimport {verticalSliders} from '@tomlarkworthy/vertical-sliders'\n~~~\n\nSupported fields in the config are _mins, maxs, steps, values, names, labels_\n\n~~~js\nviewof color = verticalSliders({\n names: [\"r\", \"g\", \"b\"],\n labels:[\"red\", \"green\", \"blue\"],\n maxs: [255,255,255],\n steps: [1,1,1]\n})\n~~~\n\nVertical sliders were used in [@tomlarkworthy/wormhole2](https://observablehq.com/@tomlarkworthy/wormhole2)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"color","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"viewof color2 = verticalSliderLabels({\n names: [\"r\", \"g\", \"b\"],\n labels:[\"red\", \"green\", \"blue\"],\n values: [color.r, color.g, color.b],\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"color","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"viewof color = verticalSliders({\n names: [\"r\", \"g\", \"b\"],\n labels:[\"red\", \"green\", \"blue\"],\n maxs: [255,255,255],\n steps: [1,1,1]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"## not implemented here","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":80,"value":"viewof demo = verticalSliders({\n values: Array(30).fill(0).map((_, i) => Math.sin(i/3 + now/10000) / 2 + 0.5),\n labels: Array(30).fill(0).map((_, i) => i)\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"import {form} from \"@tomlarkworthy/mutable-form-input\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 30:"$2f:body"