[{"data":1,"prerenderedAt":345},["ShallowReactive",2],{"docs-nav-pkg":3,"docs-page-pkg-\u002Fpkg\u002Fslider":133},[4,8,12,15,18,21,24,27,30,33,36,39,42,45,48,51,54,57,60,63,66,69,72,75,78,81,84,87,90,93,96,99,102,105,108,111,114,117,121,124,127,130],{"path":5,"title":6,"section":7},"\u002Fpkg","Overview","Start",{"path":9,"title":10,"section":11},"\u002Fpkg\u002Faccordion","Accordion","Components",{"path":13,"title":14,"section":11},"\u002Fpkg\u002Falert-dialog","Alert Dialog",{"path":16,"title":17,"section":11},"\u002Fpkg\u002Fautocomplete","Autocomplete",{"path":19,"title":20,"section":11},"\u002Fpkg\u002Favatar","Avatar",{"path":22,"title":23,"section":11},"\u002Fpkg\u002Fbutton","Button",{"path":25,"title":26,"section":11},"\u002Fpkg\u002Fcheckbox","Checkbox",{"path":28,"title":29,"section":11},"\u002Fpkg\u002Fcheckbox-group","Checkbox Group",{"path":31,"title":32,"section":11},"\u002Fpkg\u002Fcollapsible","Collapsible",{"path":34,"title":35,"section":11},"\u002Fpkg\u002Fcombobox","Combobox",{"path":37,"title":38,"section":11},"\u002Fpkg\u002Fcontext-menu","Context Menu",{"path":40,"title":41,"section":11},"\u002Fpkg\u002Fdialog","Dialog",{"path":43,"title":44,"section":11},"\u002Fpkg\u002Fdrawer","Drawer",{"path":46,"title":47,"section":11},"\u002Fpkg\u002Ffield","Field",{"path":49,"title":50,"section":11},"\u002Fpkg\u002Ffieldset","Fieldset",{"path":52,"title":53,"section":11},"\u002Fpkg\u002Fform","Form",{"path":55,"title":56,"section":11},"\u002Fpkg\u002Ficon-picker","Icon picker",{"path":58,"title":59,"section":11},"\u002Fpkg\u002Finput","Input",{"path":61,"title":62,"section":11},"\u002Fpkg\u002Fmenu","Menu",{"path":64,"title":65,"section":11},"\u002Fpkg\u002Fmenubar","Menubar",{"path":67,"title":68,"section":11},"\u002Fpkg\u002Fmeter","Meter",{"path":70,"title":71,"section":11},"\u002Fpkg\u002Fnavigation-menu","Navigation Menu",{"path":73,"title":74,"section":11},"\u002Fpkg\u002Fnumber-field","Number Field",{"path":76,"title":77,"section":11},"\u002Fpkg\u002Fotp-field","OTP Field",{"path":79,"title":80,"section":11},"\u002Fpkg\u002Fplot","Plot",{"path":82,"title":83,"section":11},"\u002Fpkg\u002Fpopover","Popover",{"path":85,"title":86,"section":11},"\u002Fpkg\u002Fpreview-card","Preview Card",{"path":88,"title":89,"section":11},"\u002Fpkg\u002Fprogress","Progress",{"path":91,"title":92,"section":11},"\u002Fpkg\u002Fradio-group","Radio Group",{"path":94,"title":95,"section":11},"\u002Fpkg\u002Fscroll-area","Scroll Area",{"path":97,"title":98,"section":11},"\u002Fpkg\u002Fselect","Select",{"path":100,"title":101,"section":11},"\u002Fpkg\u002Fseparator","Separator",{"path":103,"title":104,"section":11},"\u002Fpkg\u002Fsidebar","Sidebar",{"path":106,"title":107,"section":11},"\u002Fpkg\u002Fslider","Slider",{"path":109,"title":110,"section":11},"\u002Fpkg\u002Fswitch","Switch",{"path":112,"title":113,"section":11},"\u002Fpkg\u002Ftabs","Tabs",{"path":115,"title":116,"section":11},"\u002Fpkg\u002Ftoast","Toast",{"path":118,"title":119,"section":120},"\u002Fpkg\u002Fapi","Api","Runtime",{"path":122,"title":123,"section":120},"\u002Fpkg\u002Fauth","Auth",{"path":125,"title":126,"section":120},"\u002Fpkg\u002Fblob","Blob",{"path":128,"title":129,"section":120},"\u002Fpkg\u002Fchannels","Channels",{"path":131,"title":132,"section":120},"\u002Fpkg\u002Fdb","Db",{"id":134,"title":107,"body":135,"description":338,"extension":339,"meta":340,"navigation":341,"path":106,"section":11,"seo":342,"stem":343,"__hash__":344},"pkg\u002Fpkg\u002Fslider.md",{"type":136,"value":137,"toc":334},"minimark",[138,147,150,155,258,262,319,330],[139,140,141,142,146],"p",{},"An easily stylable range input. Pass an array to ",[143,144,145],"code",{},"defaultValue"," and one thumb per value for a range. The track uses the color wash, the indicator uses the accent, and the thumb stays light. Hover and focus shift the thumb. Label and value are Regular.",[148,149],"base-slider-demo",{},[151,152,154],"h2",{"id":153},"anatomy","Anatomy",[156,157,162],"pre",{"className":158,"code":159,"language":160,"meta":161,"style":161},"language-vue shiki shiki-themes github-light github-dark","\u003CUiSliderRoot :default-value=\"25\">\n  \u003CUiSliderLabel>Volume\u003C\u002FUiSliderLabel>\n  \u003CUiSliderValue \u002F>\n  \u003CUiSliderControl>\n    \u003CUiSliderTrack>\n      \u003CUiSliderIndicator \u002F>\n      \u003CUiSliderThumb aria-label=\"Volume\" \u002F>\n    \u003C\u002FUiSliderTrack>\n  \u003C\u002FUiSliderControl>\n\u003C\u002FUiSliderRoot>\n","vue","",[143,163,164,200,206,212,218,224,230,236,242,248],{"__ignoreMap":161},[165,166,169,173,177,180,184,187,191,195,197],"span",{"class":167,"line":168},"line",1,[165,170,172],{"class":171},"sVt8B","\u003C",[165,174,176],{"class":175},"s9eBZ","UiSliderRoot",[165,178,179],{"class":171}," :",[165,181,183],{"class":182},"sScJk","default-value",[165,185,186],{"class":171},"=",[165,188,190],{"class":189},"sZZnC","\"",[165,192,194],{"class":193},"sj4cs","25",[165,196,190],{"class":189},[165,198,199],{"class":171},">\n",[165,201,203],{"class":167,"line":202},2,[165,204,205],{"class":171},"  \u003CUiSliderLabel>Volume\u003C\u002FUiSliderLabel>\n",[165,207,209],{"class":167,"line":208},3,[165,210,211],{"class":171},"  \u003CUiSliderValue \u002F>\n",[165,213,215],{"class":167,"line":214},4,[165,216,217],{"class":171},"  \u003CUiSliderControl>\n",[165,219,221],{"class":167,"line":220},5,[165,222,223],{"class":171},"    \u003CUiSliderTrack>\n",[165,225,227],{"class":167,"line":226},6,[165,228,229],{"class":171},"      \u003CUiSliderIndicator \u002F>\n",[165,231,233],{"class":167,"line":232},7,[165,234,235],{"class":171},"      \u003CUiSliderThumb aria-label=\"Volume\" \u002F>\n",[165,237,239],{"class":167,"line":238},8,[165,240,241],{"class":171},"    \u003C\u002FUiSliderTrack>\n",[165,243,245],{"class":167,"line":244},9,[165,246,247],{"class":171},"  \u003C\u002FUiSliderControl>\n",[165,249,251,254,256],{"class":167,"line":250},10,[165,252,253],{"class":171},"\u003C\u002F",[165,255,176],{"class":175},[165,257,199],{"class":171},[151,259,261],{"id":260},"parts","Parts",[263,264,265,292,298,304,310],"ul",{},[266,267,268,272,273,276,277,279,280,283,284,287,288,291],"li",{},[269,270,271],"strong",{},"Root"," — ",[143,274,275],{},"value"," \u002F ",[143,278,145],{}," as a number or number array. ",[143,281,282],{},"min"," 0, ",[143,285,286],{},"max"," 100, ",[143,289,290],{},"step"," 1.",[266,293,294,297],{},[269,295,296],{},"Label \u002F Value"," — optional name and formatted reading.",[266,299,300,303],{},[269,301,302],{},"Control \u002F Track"," — pointer drag. Clicking the track moves the nearest thumb.",[266,305,306,309],{},[269,307,308],{},"Indicator"," — fills from min (or the first thumb) to the last thumb. Width is CSS.",[266,311,312,272,315,318],{},[269,313,314],{},"Thumb",[143,316,317],{},"role=\"slider\"",". Arrows step, Home \u002F End, PageUp \u002F PageDown.",[139,320,321,322,325,326,329],{},"Give each thumb an accessible name with ",[143,323,324],{},"aria-label"," or ",[143,327,328],{},"UiSliderLabel",".",[331,332,333],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":161,"searchDepth":202,"depth":202,"links":335},[336,337],{"id":153,"depth":202,"text":154},{"id":260,"depth":202,"text":261},"An easily stylable range input","md",{},true,{"title":107,"description":338},"pkg\u002Fslider","x6CTC7enb1q0xp3XVz9MhzHmvBY77X91z6t9fzf23yM",1791043755178]