[{"data":1,"prerenderedAt":1339},["ShallowReactive",2],{"docs-nav":3,"docs:\u002Fdocs\u002Fcomponents\u002Fslider":187,"docs-surround:\u002Fdocs\u002Fcomponents\u002Fslider":1334},[4,31,178],{"title":5,"path":6,"stem":7,"children":8,"page":30},"Getting Started","\u002Fdocs\u002Fgetting-started","docs\u002F1.getting-started",[9,14,18,22,26],{"title":10,"path":11,"stem":12,"status":13,"badge":13},"Introduction","\u002Fdocs\u002Fgetting-started\u002Fintroduction","docs\u002F1.getting-started\u002F1.introduction",null,{"title":15,"path":16,"stem":17,"status":13,"badge":13},"Installation","\u002Fdocs\u002Fgetting-started\u002Finstallation","docs\u002F1.getting-started\u002F2.installation",{"title":19,"path":20,"stem":21,"status":13,"badge":13},"Theming","\u002Fdocs\u002Fgetting-started\u002Ftheming","docs\u002F1.getting-started\u002F3.theming",{"title":23,"path":24,"stem":25,"status":13,"badge":13},"Accessibility & reduced motion","\u002Fdocs\u002Fgetting-started\u002Faccessibility","docs\u002F1.getting-started\u002F4.accessibility",{"title":27,"path":28,"stem":29,"status":13,"badge":13},"Sound","\u002Fdocs\u002Fgetting-started\u002Fsound","docs\u002F1.getting-started\u002F5.sound",false,{"title":32,"path":33,"stem":34,"children":35,"page":30},"Components","\u002Fdocs\u002Fcomponents","docs\u002F2.components",[36,40,44,49,53,57,61,65,69,73,77,81,85,89,93,97,101,105,109,113,117,121,126,130,134,138,142,146,150,154,158,162,166,170,174],{"title":37,"path":38,"stem":39,"status":13,"badge":13},"Button","\u002Fdocs\u002Fcomponents\u002Fbutton","docs\u002F2.components\u002F01.button",{"title":41,"path":42,"stem":43,"status":13,"badge":13},"Spinner","\u002Fdocs\u002Fcomponents\u002Fspinner","docs\u002F2.components\u002F02.spinner",{"title":45,"path":46,"stem":47,"status":13,"badge":48},"Toggle","\u002Fdocs\u002Fcomponents\u002Ftoggle","docs\u002F2.components\u002F03.toggle","experimental",{"title":50,"path":51,"stem":52,"status":13,"badge":13},"Switch","\u002Fdocs\u002Fcomponents\u002Fswitch","docs\u002F2.components\u002F04.switch",{"title":54,"path":55,"stem":56,"status":13,"badge":13},"Checkbox","\u002Fdocs\u002Fcomponents\u002Fcheckbox","docs\u002F2.components\u002F05.checkbox",{"title":58,"path":59,"stem":60,"status":13,"badge":13},"Radio Group","\u002Fdocs\u002Fcomponents\u002Fradio-group","docs\u002F2.components\u002F06.radio-group",{"title":62,"path":63,"stem":64,"status":13,"badge":48},"Input","\u002Fdocs\u002Fcomponents\u002Finput","docs\u002F2.components\u002F07.input",{"title":66,"path":67,"stem":68,"status":13,"badge":13},"Slider","\u002Fdocs\u002Fcomponents\u002Fslider","docs\u002F2.components\u002F08.slider",{"title":70,"path":71,"stem":72,"status":13,"badge":13},"Progress","\u002Fdocs\u002Fcomponents\u002Fprogress","docs\u002F2.components\u002F09.progress",{"title":74,"path":75,"stem":76,"status":13,"badge":48},"Select","\u002Fdocs\u002Fcomponents\u002Fselect","docs\u002F2.components\u002F10.select",{"title":78,"path":79,"stem":80,"status":13,"badge":13},"Popover","\u002Fdocs\u002Fcomponents\u002Fpopover","docs\u002F2.components\u002F11.popover",{"title":82,"path":83,"stem":84,"status":13,"badge":13},"Dropdown Menu","\u002Fdocs\u002Fcomponents\u002Fdropdown-menu","docs\u002F2.components\u002F12.dropdown-menu",{"title":86,"path":87,"stem":88,"status":13,"badge":13},"Tooltip","\u002Fdocs\u002Fcomponents\u002Ftooltip","docs\u002F2.components\u002F13.tooltip",{"title":90,"path":91,"stem":92,"status":13,"badge":13},"Tabs","\u002Fdocs\u002Fcomponents\u002Ftabs","docs\u002F2.components\u002F14.tabs",{"title":94,"path":95,"stem":96,"status":13,"badge":48},"Accordion","\u002Fdocs\u002Fcomponents\u002Faccordion","docs\u002F2.components\u002F15.accordion",{"title":98,"path":99,"stem":100,"status":13,"badge":48},"Dialog","\u002Fdocs\u002Fcomponents\u002Fdialog","docs\u002F2.components\u002F16.dialog",{"title":102,"path":103,"stem":104,"status":13,"badge":48},"Alert Dialog","\u002Fdocs\u002Fcomponents\u002Falert-dialog","docs\u002F2.components\u002F17.alert-dialog",{"title":106,"path":107,"stem":108,"status":13,"badge":48},"Sheet","\u002Fdocs\u002Fcomponents\u002Fsheet","docs\u002F2.components\u002F18.sheet",{"title":110,"path":111,"stem":112,"status":13,"badge":48},"Drawer","\u002Fdocs\u002Fcomponents\u002Fdrawer","docs\u002F2.components\u002F19.drawer",{"title":114,"path":115,"stem":116,"status":13,"badge":13},"Toaster","\u002Fdocs\u002Fcomponents\u002Ftoaster","docs\u002F2.components\u002F20.toaster",{"title":118,"path":119,"stem":120,"status":13,"badge":48},"Page transition","\u002Fdocs\u002Fcomponents\u002Fpage-transition","docs\u002F2.components\u002F21.page-transition",{"title":122,"path":123,"stem":124,"status":125,"badge":13},"Blob","\u002Fdocs\u002Fcomponents\u002Fblob","docs\u002F2.components\u002F22.blob","soon",{"title":127,"path":128,"stem":129,"status":13,"badge":48},"Command","\u002Fdocs\u002Fcomponents\u002Fcommand","docs\u002F2.components\u002F23.command",{"title":131,"path":132,"stem":133,"status":13,"badge":48},"Combobox","\u002Fdocs\u002Fcomponents\u002Fcombobox","docs\u002F2.components\u002F24.combobox",{"title":135,"path":136,"stem":137,"status":13,"badge":48},"NumberField","\u002Fdocs\u002Fcomponents\u002Fnumber-field","docs\u002F2.components\u002F25.number-field",{"title":139,"path":140,"stem":141,"status":13,"badge":48},"InputOTP","\u002Fdocs\u002Fcomponents\u002Finput-otp","docs\u002F2.components\u002F26.input-otp",{"title":143,"path":144,"stem":145,"status":13,"badge":48},"Hover Card","\u002Fdocs\u002Fcomponents\u002Fhover-card","docs\u002F2.components\u002F27.hover-card",{"title":147,"path":148,"stem":149,"status":13,"badge":48},"Context Menu","\u002Fdocs\u002Fcomponents\u002Fcontext-menu","docs\u002F2.components\u002F28.context-menu",{"title":151,"path":152,"stem":153,"status":13,"badge":48},"Skeleton","\u002Fdocs\u002Fcomponents\u002Fskeleton","docs\u002F2.components\u002F29.skeleton",{"title":155,"path":156,"stem":157,"status":13,"badge":48},"Badge","\u002Fdocs\u002Fcomponents\u002Fbadge","docs\u002F2.components\u002F30.badge",{"title":159,"path":160,"stem":161,"status":13,"badge":48},"Card","\u002Fdocs\u002Fcomponents\u002Fcard","docs\u002F2.components\u002F31.card",{"title":163,"path":164,"stem":165,"status":13,"badge":48},"Avatar","\u002Fdocs\u002Fcomponents\u002Favatar","docs\u002F2.components\u002F32.avatar",{"title":167,"path":168,"stem":169,"status":13,"badge":48},"Separator","\u002Fdocs\u002Fcomponents\u002Fseparator","docs\u002F2.components\u002F33.separator",{"title":171,"path":172,"stem":173,"status":13,"badge":48},"Label","\u002Fdocs\u002Fcomponents\u002Flabel","docs\u002F2.components\u002F34.label",{"title":175,"path":176,"stem":177,"status":13,"badge":48},"Sidebar","\u002Fdocs\u002Fcomponents\u002Fsidebar","docs\u002F2.components\u002F35.sidebar",{"title":179,"path":180,"stem":181,"children":182,"page":30},"Core","\u002Fdocs\u002Fcore","docs\u002F3.core",[183],{"title":184,"path":185,"stem":186,"status":13,"badge":13},"API reference","\u002Fdocs\u002Fcore\u002Fapi","docs\u002F3.core\u002F1.api",{"id":188,"title":66,"badge":13,"body":189,"description":1329,"extension":1330,"meta":1331,"navigation":468,"path":67,"seo":1332,"status":13,"stem":68,"__hash__":1333},"docs\u002Fdocs\u002F2.components\u002F08.slider.md",{"type":190,"value":191,"toc":1312},"minimark",[192,201,221,225,230,255,297,311,315,329,357,361,413,580,591,595,650,654,657,663,710,738,742,746,781,785,791,795,844,848,878,883,1004,1007,1010,1014,1046,1053,1057,1068,1104,1115,1119,1140,1263,1267,1272,1275,1287,1291,1308],[193,194,197],"playground",{"caption":195,"name":196},"Drag fast and let go. Click the track to jump.","slider",[198,199],"demo-slider",{"set":200},"basic",[202,203,205],"callout",{"type":204},"alpha",[206,207,208,212,213,216,217,220],"p",{},[209,210,211],"code",{},"@goopui\u002Fvue"," and ",[209,214,215],{},"@goopui\u002Fnuxt"," are in alpha, so APIs may still change. The slider on this page is the real ",[209,218,219],{},"GoopSlider",", and the code below is exactly what you write.",[222,223,15],"h2",{"id":224},"installation",[226,227,229],"h3",{"id":228},"nuxt","Nuxt",[231,232,237],"pre",{"className":233,"code":234,"language":235,"meta":236,"style":236},"language-bash shiki shiki-themes github-light github-dark","pnpm add @goopui\u002Fnuxt\n","bash","",[209,238,239],{"__ignoreMap":236},[240,241,244,248,252],"span",{"class":242,"line":243},"line",1,[240,245,247],{"class":246},"sScJk","pnpm",[240,249,251],{"class":250},"sZZnC"," add",[240,253,254],{"class":250}," @goopui\u002Fnuxt\n",[231,256,261],{"className":257,"code":258,"filename":259,"language":260,"meta":236,"style":236},"language-ts shiki shiki-themes github-light github-dark","export default defineNuxtConfig({\n  modules: ['@goopui\u002Fnuxt'],\n})\n","nuxt.config.ts","ts",[209,262,263,279,291],{"__ignoreMap":236},[240,264,265,269,272,275],{"class":242,"line":243},[240,266,268],{"class":267},"szBVR","export",[240,270,271],{"class":267}," default",[240,273,274],{"class":246}," defineNuxtConfig",[240,276,278],{"class":277},"sVt8B","({\n",[240,280,282,285,288],{"class":242,"line":281},2,[240,283,284],{"class":277},"  modules: [",[240,286,287],{"class":250},"'@goopui\u002Fnuxt'",[240,289,290],{"class":277},"],\n",[240,292,294],{"class":242,"line":293},3,[240,295,296],{"class":277},"})\n",[206,298,299,300,302,303,306,307,310],{},"The module auto-imports ",[209,301,219],{}," and adds ",[209,304,305],{},"goop.css",". See ",[308,309,15],"a",{"href":16}," for the module options.",[226,312,314],{"id":313},"vue","Vue",[231,316,318],{"className":233,"code":317,"language":235,"meta":236,"style":236},"pnpm add @goopui\u002Fvue\n",[209,319,320],{"__ignoreMap":236},[240,321,322,324,326],{"class":242,"line":243},[240,323,247],{"class":246},[240,325,251],{"class":250},[240,327,328],{"class":250}," @goopui\u002Fvue\n",[231,330,335],{"className":331,"code":332,"filename":333,"language":334,"meta":236,"style":236},"language-css shiki shiki-themes github-light github-dark","@import \"tailwindcss\";\n@import \"@goopui\u002Fvue\u002Fgoop.css\";\n","main.css","css",[209,336,337,348],{"__ignoreMap":236},[240,338,339,342,345],{"class":242,"line":243},[240,340,341],{"class":267},"@import",[240,343,344],{"class":250}," \"tailwindcss\"",[240,346,347],{"class":277},";\n",[240,349,350,352,355],{"class":242,"line":281},[240,351,341],{"class":267},[240,353,354],{"class":250}," \"@goopui\u002Fvue\u002Fgoop.css\"",[240,356,347],{"class":277},[222,358,360],{"id":359},"usage","Usage",[206,362,363,365,366,372,373,378,379,382,383,386,387,386,390,386,393,386,396,386,399,386,402,386,405,408,409,412],{},[209,364,219],{}," wraps the same ",[308,367,371],{"href":368,"rel":369},"https:\u002F\u002Freka-ui.com\u002Fdocs\u002Fcomponents\u002Fslider",[370],"nofollow","reka-ui Slider"," as ",[308,374,377],{"href":375,"rel":376},"https:\u002F\u002Fwww.shadcn-vue.com\u002Fdocs\u002Fcomponents\u002Fslider",[370],"shadcn-vue's Slider",". The API is the same: ",[209,380,381],{},"v-model"," is an array with one number per thumb, and ",[209,384,385],{},"min",", ",[209,388,389],{},"max",[209,391,392],{},"step",[209,394,395],{},"orientation",[209,397,398],{},"dir",[209,400,401],{},"inverted",[209,403,404],{},"disabled",[209,406,407],{},"name",", and ",[209,410,411],{},"minStepsBetweenThumbs"," pass through to reka-ui.",[231,414,417],{"className":415,"code":416,"language":313,"meta":236,"style":236},"language-vue shiki shiki-themes github-light github-dark","\u003Cscript setup lang=\"ts\">\n\u002F\u002F Nuxt auto-imports this. In plain Vue, import it:\nimport { GoopSlider } from '@goopui\u002Fvue'\n\nconst volume = ref([50])\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CGoopSlider v-model=\"volume\" :max=\"100\" :step=\"1\" \u002F>\n\u003C\u002Ftemplate>\n",[209,418,419,443,449,463,470,495,505,510,520,571],{"__ignoreMap":236},[240,420,421,424,428,431,434,437,440],{"class":242,"line":243},[240,422,423],{"class":277},"\u003C",[240,425,427],{"class":426},"s9eBZ","script",[240,429,430],{"class":246}," setup",[240,432,433],{"class":246}," lang",[240,435,436],{"class":277},"=",[240,438,439],{"class":250},"\"ts\"",[240,441,442],{"class":277},">\n",[240,444,445],{"class":242,"line":281},[240,446,448],{"class":447},"sJ8bj","\u002F\u002F Nuxt auto-imports this. In plain Vue, import it:\n",[240,450,451,454,457,460],{"class":242,"line":293},[240,452,453],{"class":267},"import",[240,455,456],{"class":277}," { GoopSlider } ",[240,458,459],{"class":267},"from",[240,461,462],{"class":250}," '@goopui\u002Fvue'\n",[240,464,466],{"class":242,"line":465},4,[240,467,469],{"emptyLinePlaceholder":468},true,"\n",[240,471,473,476,480,483,486,489,492],{"class":242,"line":472},5,[240,474,475],{"class":267},"const",[240,477,479],{"class":478},"sj4cs"," volume",[240,481,482],{"class":267}," =",[240,484,485],{"class":246}," ref",[240,487,488],{"class":277},"([",[240,490,491],{"class":478},"50",[240,493,494],{"class":277},"])\n",[240,496,498,501,503],{"class":242,"line":497},6,[240,499,500],{"class":277},"\u003C\u002F",[240,502,427],{"class":426},[240,504,442],{"class":277},[240,506,508],{"class":242,"line":507},7,[240,509,469],{"emptyLinePlaceholder":468},[240,511,513,515,518],{"class":242,"line":512},8,[240,514,423],{"class":277},[240,516,517],{"class":426},"template",[240,519,442],{"class":277},[240,521,523,526,528,531,533,536,539,541,544,546,548,550,553,555,557,559,561,563,566,568],{"class":242,"line":522},9,[240,524,525],{"class":277},"  \u003C",[240,527,219],{"class":426},[240,529,530],{"class":246}," v-model",[240,532,436],{"class":277},[240,534,535],{"class":250},"\"",[240,537,538],{"class":277},"volume",[240,540,535],{"class":250},[240,542,543],{"class":277}," :",[240,545,389],{"class":246},[240,547,436],{"class":277},[240,549,535],{"class":250},[240,551,552],{"class":478},"100",[240,554,535],{"class":250},[240,556,543],{"class":277},[240,558,392],{"class":246},[240,560,436],{"class":277},[240,562,535],{"class":250},[240,564,565],{"class":478},"1",[240,567,535],{"class":250},[240,569,570],{"class":277}," \u002F>\n",[240,572,574,576,578],{"class":242,"line":573},10,[240,575,500],{"class":277},[240,577,517],{"class":426},[240,579,442],{"class":277},[206,581,582,583,586,587,590],{},"It emits ",[209,584,585],{},"update:modelValue"," while you drag, and ",[209,588,589],{},"valueCommit"," when you let go.",[222,592,594],{"id":593},"behavior","Behavior",[596,597,598,610,619,628,637,647],"ul",{},[599,600,601,605,606,609],"li",{},[602,603,604],"strong",{},"Jelly."," The thumb follows your pointer on a spring. It lags, overshoots, and wobbles to rest (",[209,607,608],{},"jelly",").",[599,611,612,615,616,609],{},[602,613,614],{},"Slosh."," The surface of the fill piles up toward the front when you move fast, then sloshes back and waves (",[209,617,618],{},"slosh",[599,620,621,624,625,609],{},[602,622,623],{},"Stretch."," The thumb stretches along the track with speed (",[209,626,627],{},"stretch",[599,629,630,633,634,609],{},[602,631,632],{},"Splat."," Click the track and the thumb jumps there, landing with a small splat (",[209,635,636],{},"splat",[599,638,639,642,643,646],{},[602,640,641],{},"Layout"," never changes. The goo is drawn in one ",[209,644,645],{},"aria-hidden"," layer on the slider root. The real range and thumbs stay in place and go see-through, so reka-ui keeps drag, keyboard, focus, and ARIA exactly as they were.",[599,648,649],{},"The thumb keeps its hover and focus ring.",[222,651,653],{"id":652},"range","Range",[206,655,656],{},"Pass two numbers for a range slider. The liquid fills between the thumbs:",[658,659,661],"preview",{":controls":660},"false",[198,662],{"set":652},[231,664,666],{"className":415,"code":665,"language":313,"meta":236,"style":236},"\u003CGoopSlider v-model=\"range\" :max=\"100\" :step=\"1\" \u002F>\n",[209,667,668],{"__ignoreMap":236},[240,669,670,672,674,676,678,680,682,684,686,688,690,692,694,696,698,700,702,704,706,708],{"class":242,"line":243},[240,671,423],{"class":277},[240,673,219],{"class":426},[240,675,530],{"class":246},[240,677,436],{"class":277},[240,679,535],{"class":250},[240,681,652],{"class":277},[240,683,535],{"class":250},[240,685,543],{"class":277},[240,687,389],{"class":246},[240,689,436],{"class":277},[240,691,535],{"class":250},[240,693,552],{"class":478},[240,695,535],{"class":250},[240,697,543],{"class":277},[240,699,392],{"class":246},[240,701,436],{"class":277},[240,703,535],{"class":250},[240,705,565],{"class":478},[240,707,535],{"class":250},[240,709,570],{"class":277},[231,711,713],{"className":257,"code":712,"language":260,"meta":236,"style":236},"const range = ref([25, 75])\n",[209,714,715],{"__ignoreMap":236},[240,716,717,719,722,724,726,728,731,733,736],{"class":242,"line":243},[240,718,475],{"class":267},[240,720,721],{"class":478}," range",[240,723,482],{"class":267},[240,725,485],{"class":246},[240,727,488],{"class":277},[240,729,730],{"class":478},"25",[240,732,386],{"class":277},[240,734,735],{"class":478},"75",[240,737,494],{"class":277},[222,739,741],{"id":740},"vertical","Vertical",[658,743,744],{":controls":660},[198,745],{"set":740},[231,747,749],{"className":415,"code":748,"language":313,"meta":236,"style":236},"\u003Cdiv class=\"h-44\">\n  \u003CGoopSlider v-model=\"level\" orientation=\"vertical\" :max=\"100\" \u002F>\n\u003C\u002Fdiv>\n",[209,750,751,768,773],{"__ignoreMap":236},[240,752,753,755,758,761,763,766],{"class":242,"line":243},[240,754,423],{"class":277},[240,756,757],{"class":426},"div",[240,759,760],{"class":246}," class",[240,762,436],{"class":277},[240,764,765],{"class":250},"\"h-44\"",[240,767,442],{"class":277},[240,769,770],{"class":242,"line":281},[240,771,772],{"class":277},"  \u003CGoopSlider v-model=\"level\" orientation=\"vertical\" :max=\"100\" \u002F>\n",[240,774,775,777,779],{"class":242,"line":293},[240,776,500],{"class":277},[240,778,757],{"class":426},[240,780,442],{"class":277},[222,782,784],{"id":783},"steps","Steps",[206,786,787,788,790],{},"With ",[209,789,392],{},", every move is a small jump. The thumb still lags and settles.",[658,792,793],{":controls":660},[198,794],{"set":783},[231,796,798],{"className":415,"code":797,"language":313,"meta":236,"style":236},"\u003CGoopSlider v-model=\"quality\" :max=\"100\" :step=\"10\" \u002F>\n",[209,799,800],{"__ignoreMap":236},[240,801,802,804,806,808,810,812,815,817,819,821,823,825,827,829,831,833,835,837,840,842],{"class":242,"line":243},[240,803,423],{"class":277},[240,805,219],{"class":426},[240,807,530],{"class":246},[240,809,436],{"class":277},[240,811,535],{"class":250},[240,813,814],{"class":277},"quality",[240,816,535],{"class":250},[240,818,543],{"class":277},[240,820,389],{"class":246},[240,822,436],{"class":277},[240,824,535],{"class":250},[240,826,552],{"class":478},[240,828,535],{"class":250},[240,830,543],{"class":277},[240,832,392],{"class":246},[240,834,436],{"class":277},[240,836,535],{"class":250},[240,838,839],{"class":478},"10",[240,841,535],{"class":250},[240,843,570],{"class":277},[222,845,847],{"id":846},"effects-and-presets","Effects and presets",[206,849,850,851,853,854,857,858,861,862,386,865,868,869,872,873,212,875,877],{},"Each effect is a prop. ",[209,852,660],{}," turns it off, ",[209,855,856],{},"true"," uses the preset's strength, and a number from 0 to 2 scales it. ",[209,859,860],{},"preset"," picks ",[209,863,864],{},"subtle",[209,866,867],{},"playful"," (default), or ",[209,870,871],{},"wild"," for the whole slider. The first slider below has no jelly or stretch, then come ",[209,874,871],{},[209,876,864],{},":",[658,879,880],{":controls":660},[198,881],{"set":882},"effects",[231,884,886],{"className":415,"code":885,"language":313,"meta":236,"style":236},"\u003CGoopSlider :default-value=\"[40]\" :jelly=\"false\" :stretch=\"false\" \u002F>\n\u003CGoopSlider :default-value=\"[60]\" preset=\"wild\" \u002F>\n\u003CGoopSlider :default-value=\"[60]\" preset=\"subtle\" \u002F>\n",[209,887,888,940,973],{"__ignoreMap":236},[240,889,890,892,894,896,899,901,903,906,909,912,914,916,918,920,922,924,926,928,930,932,934,936,938],{"class":242,"line":243},[240,891,423],{"class":277},[240,893,219],{"class":426},[240,895,543],{"class":277},[240,897,898],{"class":246},"default-value",[240,900,436],{"class":277},[240,902,535],{"class":250},[240,904,905],{"class":277},"[",[240,907,908],{"class":478},"40",[240,910,911],{"class":277},"]",[240,913,535],{"class":250},[240,915,543],{"class":277},[240,917,608],{"class":246},[240,919,436],{"class":277},[240,921,535],{"class":250},[240,923,660],{"class":478},[240,925,535],{"class":250},[240,927,543],{"class":277},[240,929,627],{"class":246},[240,931,436],{"class":277},[240,933,535],{"class":250},[240,935,660],{"class":478},[240,937,535],{"class":250},[240,939,570],{"class":277},[240,941,942,944,946,948,950,952,954,956,959,961,963,966,968,971],{"class":242,"line":281},[240,943,423],{"class":277},[240,945,219],{"class":426},[240,947,543],{"class":277},[240,949,898],{"class":246},[240,951,436],{"class":277},[240,953,535],{"class":250},[240,955,905],{"class":277},[240,957,958],{"class":478},"60",[240,960,911],{"class":277},[240,962,535],{"class":250},[240,964,965],{"class":246}," preset",[240,967,436],{"class":277},[240,969,970],{"class":250},"\"wild\"",[240,972,570],{"class":277},[240,974,975,977,979,981,983,985,987,989,991,993,995,997,999,1002],{"class":242,"line":293},[240,976,423],{"class":277},[240,978,219],{"class":426},[240,980,543],{"class":277},[240,982,898],{"class":246},[240,984,436],{"class":277},[240,986,535],{"class":250},[240,988,905],{"class":277},[240,990,958],{"class":478},[240,992,911],{"class":277},[240,994,535],{"class":250},[240,996,965],{"class":246},[240,998,436],{"class":277},[240,1000,1001],{"class":250},"\"subtle\"",[240,1003,570],{"class":277},[222,1005,1006],{"id":404},"Disabled",[206,1008,1009],{},"A disabled slider ignores the pointer and goes to half opacity, like shadcn's.",[658,1011,1012],{":controls":660},[198,1013],{"set":404},[231,1015,1017],{"className":415,"code":1016,"language":313,"meta":236,"style":236},"\u003CGoopSlider :default-value=\"[40]\" disabled \u002F>\n",[209,1018,1019],{"__ignoreMap":236},[240,1020,1021,1023,1025,1027,1029,1031,1033,1035,1037,1039,1041,1044],{"class":242,"line":243},[240,1022,423],{"class":277},[240,1024,219],{"class":426},[240,1026,543],{"class":277},[240,1028,898],{"class":246},[240,1030,436],{"class":277},[240,1032,535],{"class":250},[240,1034,905],{"class":277},[240,1036,908],{"class":478},[240,1038,911],{"class":277},[240,1040,535],{"class":250},[240,1042,1043],{"class":246}," disabled",[240,1045,570],{"class":277},[206,1047,1048,1049,1052],{},"Use ",[209,1050,1051],{},":goo=\"false\""," to render a plain shadcn Slider.",[222,1054,1056],{"id":1055},"color","Color",[206,1058,1059,1060,1063,1064,1067],{},"The goo is painted in ",[209,1061,1062],{},"--primary",". To change it, set ",[209,1065,1066],{},"--goop-slider-color"," on the slider or any ancestor:",[231,1069,1071],{"className":415,"code":1070,"language":313,"meta":236,"style":236},"\u003CGoopSlider :default-value=\"[50]\" class=\"[--goop-slider-color:var(--destructive)]\" \u002F>\n",[209,1072,1073],{"__ignoreMap":236},[240,1074,1075,1077,1079,1081,1083,1085,1087,1089,1091,1093,1095,1097,1099,1102],{"class":242,"line":243},[240,1076,423],{"class":277},[240,1078,219],{"class":426},[240,1080,543],{"class":277},[240,1082,898],{"class":246},[240,1084,436],{"class":277},[240,1086,535],{"class":250},[240,1088,905],{"class":277},[240,1090,491],{"class":478},[240,1092,911],{"class":277},[240,1094,535],{"class":250},[240,1096,760],{"class":246},[240,1098,436],{"class":277},[240,1100,1101],{"class":250},"\"[--goop-slider-color:var(--destructive)]\"",[240,1103,570],{"class":277},[206,1105,1106,1107,1110,1111,1114],{},"The track keeps shadcn's ",[209,1108,1109],{},"bg-muted",". Style it with ",[209,1112,1113],{},"class"," as you would in shadcn.",[222,1116,1118],{"id":1117},"driving-it-from-code","Driving it from code",[206,1120,1121,1123,1124,1127,1128,1131,1132,1135,1136,1139],{},[209,1122,219],{}," exposes the core handle and its root element. ",[209,1125,1126],{},"handle.measure()"," re-measures the thumbs after you change the layout by hand. ",[209,1129,1130],{},"handle"," is ",[209,1133,1134],{},"null"," before mount and when ",[209,1137,1138],{},"goo"," is off.",[231,1141,1143],{"className":415,"code":1142,"language":313,"meta":236,"style":236},"\u003Cscript setup lang=\"ts\">\nconst slider = useTemplateRef('slider')\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CGoopSlider ref=\"slider\" :default-value=\"[50]\" \u002F>\n  \u003Cbutton @click=\"slider?.handle?.measure()\">Re-measure\u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n",[209,1144,1145,1161,1182,1190,1194,1202,1233,1255],{"__ignoreMap":236},[240,1146,1147,1149,1151,1153,1155,1157,1159],{"class":242,"line":243},[240,1148,423],{"class":277},[240,1150,427],{"class":426},[240,1152,430],{"class":246},[240,1154,433],{"class":246},[240,1156,436],{"class":277},[240,1158,439],{"class":250},[240,1160,442],{"class":277},[240,1162,1163,1165,1168,1170,1173,1176,1179],{"class":242,"line":281},[240,1164,475],{"class":267},[240,1166,1167],{"class":478}," slider",[240,1169,482],{"class":267},[240,1171,1172],{"class":246}," useTemplateRef",[240,1174,1175],{"class":277},"(",[240,1177,1178],{"class":250},"'slider'",[240,1180,1181],{"class":277},")\n",[240,1183,1184,1186,1188],{"class":242,"line":293},[240,1185,500],{"class":277},[240,1187,427],{"class":426},[240,1189,442],{"class":277},[240,1191,1192],{"class":242,"line":465},[240,1193,469],{"emptyLinePlaceholder":468},[240,1195,1196,1198,1200],{"class":242,"line":472},[240,1197,423],{"class":277},[240,1199,517],{"class":426},[240,1201,442],{"class":277},[240,1203,1204,1206,1208,1210,1212,1215,1217,1219,1221,1223,1225,1227,1229,1231],{"class":242,"line":497},[240,1205,525],{"class":277},[240,1207,219],{"class":426},[240,1209,485],{"class":246},[240,1211,436],{"class":277},[240,1213,1214],{"class":250},"\"slider\"",[240,1216,543],{"class":277},[240,1218,898],{"class":246},[240,1220,436],{"class":277},[240,1222,535],{"class":250},[240,1224,905],{"class":277},[240,1226,491],{"class":478},[240,1228,911],{"class":277},[240,1230,535],{"class":250},[240,1232,570],{"class":277},[240,1234,1235,1237,1240,1243,1245,1248,1251,1253],{"class":242,"line":507},[240,1236,525],{"class":277},[240,1238,1239],{"class":426},"button",[240,1241,1242],{"class":246}," @click",[240,1244,436],{"class":277},[240,1246,1247],{"class":250},"\"slider?.handle?.measure()\"",[240,1249,1250],{"class":277},">Re-measure\u003C\u002F",[240,1252,1239],{"class":426},[240,1254,442],{"class":277},[240,1256,1257,1259,1261],{"class":242,"line":512},[240,1258,500],{"class":277},[240,1260,517],{"class":426},[240,1262,442],{"class":277},[222,1264,1266],{"id":1265},"props","Props",[206,1268,1269,1271],{},[209,1270,219],{}," keeps the shadcn-vue Slider API and adds the goo props.",[1273,1274],"component-props",{"name":196},[206,1276,1277,1278,386,1280,1282,1283,1286],{},"Effect props take ",[209,1279,856],{},[209,1281,660],{},", or a number from 0 to 2. Props win over the app-wide config (",[209,1284,1285],{},"GoopPlugin"," or the module options), which wins over the preset.",[222,1288,1290],{"id":1289},"accessibility","Accessibility",[206,1292,1293,1294,1297,1298,1300,1301,1304,1305,1307],{},"It's a real reka-ui slider: each thumb has ",[209,1295,1296],{},"role=\"slider\""," and the ARIA values, and arrow keys, Home, End, and Page Up\u002FDown work as in shadcn. The goo layer is ",[209,1299,645],{}," and can't be clicked. An ",[209,1302,1303],{},"aria-label"," you pass lands on the slider root, as in shadcn. Under reduced motion the goo keeps its shape and the effects turn off: no jelly, slosh, stretch, or splat. The thumb just follows the value. See ",[308,1306,23],{"href":24},".",[1309,1310,1311],"style",{},"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 .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);}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}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 .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":236,"searchDepth":293,"depth":293,"links":1313},[1314,1318,1319,1320,1321,1322,1323,1324,1325,1326,1327,1328],{"id":224,"depth":281,"text":15,"children":1315},[1316,1317],{"id":228,"depth":293,"text":229},{"id":313,"depth":293,"text":314},{"id":359,"depth":281,"text":360},{"id":593,"depth":281,"text":594},{"id":652,"depth":281,"text":653},{"id":740,"depth":281,"text":741},{"id":783,"depth":281,"text":784},{"id":846,"depth":281,"text":847},{"id":404,"depth":281,"text":1006},{"id":1055,"depth":281,"text":1056},{"id":1117,"depth":281,"text":1118},{"id":1265,"depth":281,"text":1266},{"id":1289,"depth":281,"text":1290},"shadcn's Slider with a liquid fill and a jelly thumb. Drag fast, then stop, and watch it settle.","md",{},{"title":66,"description":1329},"ccuVEAIp6VCsPYFvBnGKIX2pHOBoWIOrPUk4_EQnHXw",[1335,1337],{"title":62,"path":63,"stem":64,"description":1336,"children":-1},"shadcn's Input and Textarea with a goo focus ring. It flows around the border from where you clicked, ripples as you type, and drains away on blur.",{"title":70,"path":71,"stem":72,"description":1338,"children":-1},"shadcn's Progress that fills like liquid. The front bulges when the value changes, and a drip falls now and then.",1793670386528]