2b:null 2c:["$","title",null,{"children":"McNulty's Inputs | James McNulty | Observable"}] 31:Te66,function RangeSelection({min=0, max = 10, value = []}) { const width = 400; const margin = 80; const defaultColor = 'green'; const flippedColor = 'purple'; const output = html`

`; let selectedDot = null; let previousSelection = null; function positionToValue(pos) { return Math.round((pos - margin) / (width - (2*margin)) * (max-min)); } function valueToPosition(val) { return (val / (max - min)) * (width - (2*margin)) + margin; } function boundTo({min, max, value}) { if (value < min) return min; if (value > max) return max; return value; } function getCurrentValue(el) { return [ el.querySelectorAll('circle')[0].attributes.cx.value, el.querySelectorAll('circle')[1].attributes.cx.value, ].map(v => boundTo({min: margin, max: width - margin, value: v})).map(positionToValue); } function dot(id) { return svg.fragment``; } const el = html` `; el.value = getCurrentValue(el); return el; }32:[] 2f:{"id":"3d3ed6fdd92f9029","slug":"mcnultys-inputs","title":"McNulty's Inputs","thumbnail":"1d6557a255d35e9ae5037122aa3686ce9cf38fec3de73578846e07f8123a51b0","access_level":"public","create_time":"$D2021-05-10T22:29:38.094Z","update_time":"$D2023-01-24T23:21:37.840Z","view_time":null,"first_public_time":"$D2021-07-28T17:32:43.296Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"3713fd2ab4d84992","login":"jimmcnulty41","name":"James McNulty","avatar_url":"https://avatars-next.observableusercontent.com/2b48f590da324d0186ddf31435410ed1d9a319ab4b4cd1f37968f7d355e4b4de","tier":"starter_2024"},"version":461,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"2254faed97cc3d34","login":"jimmcnulty41","name":"James McNulty","avatar_url":"https://avatars-next.observableusercontent.com/2b48f590da324d0186ddf31435410ed1d9a319ab4b4cd1f37968f7d355e4b4de","tier":null}],"members":[{"type":"individual","id":"2254faed97cc3d34","login":"jimmcnulty41","name":"James McNulty","avatar_url":"https://avatars-next.observableusercontent.com/2b48f590da324d0186ddf31435410ed1d9a319ab4b4cd1f37968f7d355e4b4de","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":{"id":"4f0b575e65030801","slug":"utils","title":"Utils","owner":{"id":"3713fd2ab4d84992","login":"jimmcnulty41","name":"James McNulty"}},"type":"notebook","body":{"title":"McNulty's Inputs","cells":[{"id":0,"value":"md`# McNulty's Inputs`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"md`Working on custom inputs never made financial sense when I was employed. Now that I am not, I don't have to give a rat booty about 'financial sense' baha! Also this is only sorta complete -- tag the version if ur not me & ur using this stuff`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"md`## Range selection\n\njust ints! It's for selecting frames, so go somewhere else with ur feature requests\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":347,"value":"balh","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"viewof balh = RangeSelection({max: 10});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"balh","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"md`## Timeline Input\n\nI want to get a bunch of selections of a set of frames\n\nOur numberline is like a timeline in say adobe animate\n\nwe want a list of subsets of those frames that we can loop thru\n\n\\`\\`\\`\nTimelineSelectionInput: ({max = 1}) => (number[])[]\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"viewof yadda = TimelineSelections({n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":440,"value":"yadda\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":434,"value":"viewof n = Inputs.range([1, 10], {step: 1});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":397,"value":"yadda\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":359,"value":"function TimelineSelections({n = 3, min = 1, max = 10, value = []}) {\n const el = html`

`;\n const children = [...Array(n)].map((x,i) => RangeSelection({min, max, value: value.length? value[i] : []}));\n el.append(html.fragment`${children}`);\n children.forEach(x => {x.addEventListener('input', e => el.value = [...el.querySelectorAll('span')].map(x => x.value) );});\n el.value = children.map(x => x.value);\n return el;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"yadda","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"function set(input, value) {\n input.value = value;\n input.dispatchEvent(new Event(\"input\", { bubbles: true })); // Native events bubble, so we should too\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"svg = htl.svg","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"html = htl.html","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"