31:T7d7,function ColorAreaRange(extent = [0, 1], _options = {}) { const o = Object.assign( { // default Options valueRanges: [ // {min: 0, max: 5, color: "red", label: "Unity" } ], flexShrinkNumber: 5, flexShrinkLabel: 10 }, _options ); const range = Inputs.range(extent, o); // Make the number and label smaller range.querySelector("label").style["flex-shrink"] = o.flexShrinkLabel; range.querySelector("input[type=number]").style["flex-shrink"] = o.flexShrinkNumber; const scentEle = htl.html`

`; const target = htl.html`

${scentEle} ${range}

`; function set() { target.value = range.value; target.dispatchEvent(new Event("input", { bubbles: true })); } target.value = range.value; function onResize() { const rangeBB = range .querySelector("input[type=range]") .getBoundingClientRect(); console.log(range); const x = d3.scaleLinear().domain(extent).range([0, rangeBB.width]); scentEle.innerHTML = `

${o.valueRanges .map( (d) => `

${d.label}

` ) .join("")}

`; } // Hack for resizing after the element is mounted // https://stackoverflow.com/questions/15875128/is-there-element-rendered-event const resizeObserver = new ResizeObserver(() => { // console.log("Resize observer"); onResize(); resizeObserver.disconnect(); }); resizeObserver.observe(target); // yield target; range.addEventListener("input", set); return target; }32:[] 2f:{"title":"ColorAreaRange","cells":[{"id":0,"value":"# ColorAreaRange\n\nA Range slider input with areas with different colors and semantics","pinned":false,"hidden":false,"mode":"md"},{"id":8,"value":"viewof val = ColorAreaRange([0, 50], {\n valueRanges : [\n {min: 0, max: 5, color: \"#77bbff\", label: \"Unity\" },\n {min: 5, max: 20, color: \"#b66af2\", label: \"Progresivity\" },\n {min: 20, max: 50, color: \"#ec7ea6\", label: \"Contrast\" }\n ],\n step: 1,\n label: \"Range \",\n width\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":102,"value":"val","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}