2a:["$","title",null,{"children":"2D Slider | Fabian Iwand | Observable"}] 2f:Tf0e,function xySlider(options = {}) { const html = htl.html; const { min = 0, max = 1, step = 'any', value: defaultValue = [null, null], xmin = min, xmax = max, xstep = step, xvalue = defaultValue[0], ymin = min, ymax = max, ystep = step, yvalue = defaultValue[1], width = "150px", height = width, xkeystep = xstep === "any" ? (xmax - xmin) / 10 : xstep, ykeystep = ystep === "any" ? (ymax - ymin) / 10 : ystep, theme = theme_default, } = options; const ix = html``; const iy = html``; const controls = {}; const scope = randomScope(); const dom = html`

${controls.zone = html`

${controls.thumb = html`

`} `} ${html`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":275,"value":"md`---\n## Examples\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":450,"value":"Setting common options:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":11,"value":"viewof example = xySlider({min: -5, max: 5, step: 1, value: [2, 3]})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":56,"value":"example","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":380,"value":"Setting a custom step size for each axis:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":267,"value":"viewof example_step = xySlider({min: 0, max: 3, xstep: 1/3, ystep: 1, xvalue: 7/3})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":383,"value":"example_step","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":376,"value":"Setting custom dimensions. Note that we didn't set a step size here, in which case stepping via the arrow keys defaults to 1/10 of the width or height.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":362,"value":"viewof example_size = xySlider({width: \"160px\", height: \"100px\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":273,"value":"example_size","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":443,"value":"Customizing the theme. `:scope` gets replaced by the input's scope class selector.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":426,"value":"viewof example_theme = xySlider({\n width: \"100px\",\n theme: `\n ${theme_default}\n :scope .zone {\n border-radius: 100%;\n border: 2px solid black;\n box-shadow: none;\n background: radial-gradient(black 40%, white);\n color: black;\n }\n :scope .zone::before { background: green }\n :scope .zone::after { background: red }\n :scope .thumb {\n --thumb-size: 20px;\n background: white;\n border: none;\n box-shadow: 0 0 10px;\n }\n `\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":441,"value":"example_theme","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":408,"value":"---\n## Implementation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":49,"value":"md`---\n## Helpers\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":43,"value":"function clamp(a, b, v) {\n return v < a ? a : v > b ? b : v;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":46,"value":"function randomScope(prefix = 'scope-') {\n return prefix + (Date.now() + Math.random()).toString(36).replace(/[^a-z0-9]+/g, '-');\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2e:"$2d:body" 29:E{"digest":"NEXT_REDIRECT;replace;/@mootari/2d-slider;307;"}