3e:null 3f:["$","title",null,{"children":"HSLa Slider Node | epsilonite | Observable"}] 45:T448,draw = { var hue = [ "hsla(0,"+S+"%,"+L+"%,1)", "hsla(60,"+S+"%,"+L+"%,1)", "hsla(120,"+S+"%,"+L+"%,1)", "hsla(180,"+S+"%,"+L+"%,1)", "hsla(240,"+S+"%,"+L+"%,1)", "hsla(300,"+S+"%,"+L+"%,1)", "hsla(360,"+S+"%,"+L+"%,1)",]; var sat = ["hsla("+H+",0%,"+L+"%,1)","hsla("+H+",100%,"+L+"%,1)",]; var lum = ["black", "hsla("+H+","+S+"%,50%,1)","white",]; document.querySelector("#hue").firstElementChild.innerHTML = ""; const w = document.querySelector("#hue").getElementsByTagName("input")[0].offsetWidth/dpi; const h = document.querySelector("#hue").getElementsByTagName("input")[0].offsetHeight/dpi; document.querySelector("#hue").firstElementChild.append(grad(w,h,hue)); document.querySelector("#sat").firstElementChild.innerHTML = ""; document.querySelector("#sat").firstElementChild.append(grad(w,h,sat)); document.querySelector("#lum").firstElementChild.innerHTML = ""; document.querySelector("#lum").firstElementChild.append(grad(w,h,lum)); while (true) { display.style.background = "hsla("+H+","+S+"%,"+L+"%,1)"; yield display; } }46:T69a,function input(config) { let {form, type = "text", attributes = {}, action, getValue, title, description, format, submit, col, options} = config; if (!form) form = html``; const input = form.input; Object.keys(attributes).forEach(key => { const val = attributes[key]; if (val != null) input.setAttribute(key, val); }); if (submit) form.append(html``); form.append(html``); if (title) form.prepend(html`

${title}

`); if (description) form.append(html`

${description}

`); if (col) form.id = col; if (action) { action(form); } else { const verb = submit ? "onsubmit" : type == "button" ? "onclick" : type == "checkbox" || type == "radio" ? "onchange" : "oninput"; form[verb] = (e) => { e && e.preventDefault(); const value = getValue ? getValue(input) : input.value; if (form.output) form.output.value = format ? format(value) : value; form.value = value; if (verb !== "oninput") form.dispatchEvent(new CustomEvent("input")); }; if (verb !== "oninput") input.oninput = e => e && e.stopPropagation() && e.preventDefault(); if (verb !== "onsubmit") form.onsubmit = (e) => e && e.preventDefault(); form[verb](); } return form; }47:[] 43:{"id":"13aa25642fc18d70","slug":"hsla-slider-node","title":"HSLa Slider Node","thumbnail":"ea1d0467561e03af10607bb4a4198db1093ad2405ec5cccff15ec70e3bcb36fb","access_level":"public","create_time":"$D2018-06-14T11:39:37.710Z","update_time":"$D2018-06-14T11:55:13.192Z","view_time":null,"first_public_time":"$D2018-06-14T11:39:52.996Z","has_unpublished_edits":null,"fork":{"id":"a2459c1757037b63","slug":"hsla-slider","title":"HSLa Slider","owner":{"id":"3aaf46bb6ad1bd38","login":"epsilonite","name":""}},"stars":1,"starred":false,"owner":{"type":"team","id":"3aaf46bb6ad1bd38","login":"epsilonite","name":"","avatar_url":"https://avatars-next.observableusercontent.com/fa500008646e04a16f30cf136815b365f28231e752e4c1990d317f03ddcc64da","tier":"starter_2024","bio":""},"version":375,"publish_version":375,"role":null,"authored":false,"authors":[{"type":"individual","id":"5e4268da8126dcd6","login":"epsilonite","name":"","avatar_url":"https://avatars-next.observableusercontent.com/fa500008646e04a16f30cf136815b365f28231e752e4c1990d317f03ddcc64da","tier":null,"bio":""}],"members":[{"type":"individual","id":"5e4268da8126dcd6","login":"epsilonite","name":"","avatar_url":"https://avatars-next.observableusercontent.com/fa500008646e04a16f30cf136815b365f28231e752e4c1990d317f03ddcc64da","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"HSLa Slider Node","cells":[{"id":0,"value":"md`# HSLa Slider Node`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"html`

makes use of sliders by @jashkenas/inputs
`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"mutable display = html`
`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"viewof H = slider({min:0,max:360,value:0,col:\"hue\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"viewof S = slider({min:0,max:100,value:100, col:\"sat\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"viewof L = slider({min:0,max:100,value:50,col:\"lum\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"dpi = devicePixelRatio || 1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"function grad(w,h,col) {\n const cvs = DOM.canvas(w * dpi, h * dpi);\n const ctx = cvs.getContext(\"2d\");\n cvs.style.position = \"absolute\";\n cvs.style.zIndex = \"-9\";\n ctx.scale(dpi, dpi);\n var grd = ctx.createLinearGradient(0, 0, w, 0);\n for (let i =0; i Math.round(input.valueAsNumber)\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W47","stdlib":"1"}} 44:"$43:body"