[{"data":1,"prerenderedAt":2511},["ShallowReactive",2],{"docs:slider":3,"demo:slider\u002Fhero":2507,"demo:slider\u002Frange-slider":2508,"demo:slider\u002Fedge-alignment":2509,"demo:slider\u002Fvertical":2510},{"frontmatter":4,"meta":5,"nodes":6},{},{},[7,12,16,20,25,195,199,233,237,242,245,261,272,275,279,301,372,376,395,398,401,410,506,511,610,621,766,770,779,782,786,796,921,931,1107,1111,1115,1125,1364,1474,1478,1488,1521,1607,1610,1620,1666,1752,1756,1761,1794,1880,1884,1893,1927,2013,2017,2026,2060,2146,2150,2160,2290,2390,2395,2500],[8,9,11],"h1",{"id":10},"slider","Slider",[13,14,15],"p",{},"A value picked along a range.",[17,18],"demo",{"name":19},"slider\u002Fhero",[21,22,24],"h2",{"id":23},"anatomy","Anatomy",[26,27,31],"pre",{"language":28,"meta":29,"class":30},"vue","title=\"Anatomy\"","shiki shiki-themes github-light github-dark dark:github-dark",[32,33,35,55,56,55,72,55,81,55,83,55,92,55,102,55,113,55,122,55,131,55,141,55,151,55,160,55,169,55,178,55,187],"code",{"class":34},"language-vue",[36,37,40,44,48,52],"span",{"class":38,"style":39},"line","display: inline",[36,41,43],{"style":42},"color:#24292E;--shiki-dark:#E1E4E8","\u003C",[36,45,47],{"style":46},"color:#22863A;--shiki-dark:#85E89D","script",[36,49,51],{"style":50},"color:#6F42C1;--shiki-dark:#B392F0"," setup",[36,53,54],{"style":42},">","\n",[36,57,58,62,65,68],{"class":38,"style":39},[36,59,61],{"style":60},"color:#D73A49;--shiki-dark:#F97583","import",[36,63,64],{"style":42}," { Slider } ",[36,66,67],{"style":60},"from",[36,69,71],{"style":70},"color:#032F62;--shiki-dark:#9ECBFF"," '@shardsui\u002Fvue\u002Fslider'",[36,73,74,77,79],{"class":38,"style":39},[36,75,76],{"style":42},"\u003C\u002F",[36,78,47],{"style":46},[36,80,54],{"style":42},[36,82],{"class":38,"style":39},[36,84,85,87,90],{"class":38,"style":39},[36,86,43],{"style":42},[36,88,89],{"style":46},"template",[36,91,54],{"style":42},[36,93,94,97,100],{"class":38,"style":39},[36,95,96],{"style":42},"  \u003C",[36,98,99],{"style":46},"Slider.Root",[36,101,54],{"style":42},[36,103,104,107,110],{"class":38,"style":39},[36,105,106],{"style":42},"    \u003C",[36,108,109],{"style":46},"Slider.Label",[36,111,112],{"style":42}," \u002F>",[36,114,115,117,120],{"class":38,"style":39},[36,116,106],{"style":42},[36,118,119],{"style":46},"Slider.Value",[36,121,112],{"style":42},[36,123,124,126,129],{"class":38,"style":39},[36,125,106],{"style":42},[36,127,128],{"style":46},"Slider.Control",[36,130,54],{"style":42},[36,132,133,136,139],{"class":38,"style":39},[36,134,135],{"style":42},"      \u003C",[36,137,138],{"style":46},"Slider.Track",[36,140,54],{"style":42},[36,142,143,146,149],{"class":38,"style":39},[36,144,145],{"style":42},"        \u003C",[36,147,148],{"style":46},"Slider.Indicator",[36,150,112],{"style":42},[36,152,153,155,158],{"class":38,"style":39},[36,154,145],{"style":42},[36,156,157],{"style":46},"Slider.Thumb",[36,159,112],{"style":42},[36,161,162,165,167],{"class":38,"style":39},[36,163,164],{"style":42},"      \u003C\u002F",[36,166,138],{"style":46},[36,168,54],{"style":42},[36,170,171,174,176],{"class":38,"style":39},[36,172,173],{"style":42},"    \u003C\u002F",[36,175,128],{"style":46},[36,177,54],{"style":42},[36,179,180,183,185],{"class":38,"style":39},[36,181,182],{"style":42},"  \u003C\u002F",[36,184,99],{"style":46},[36,186,54],{"style":42},[36,188,189,191,193],{"class":38,"style":39},[36,190,76],{"style":42},[36,192,89],{"style":46},[36,194,54],{"style":42},[21,196,198],{"id":197},"usage-guidelines","Usage guidelines",[200,201,202],"ul",{},[203,204,205,209,210,213,214,217,218,221,222,227,228,232],"li",{},[206,207,208],"strong",{},"Form controls must have an accessible name",": a ",[32,211,212],{},"\u003CSlider.Label>"," usually does the job; when the design has no visible label, give each ",[32,215,216],{},"\u003CSlider.Thumb>"," its own ",[32,219,220],{},"aria-label"," instead. See ",[223,224,226],"a",{"href":225},"#examples-labeling-a-slider","Labeling a slider"," and the ",[223,229,231],{"href":230},"\u002Fforms","forms guide",".",[21,234,236],{"id":235},"examples","Examples",[238,239,241],"h3",{"id":240},"examples-range-slider","Range slider",[13,243,244],{},"Build a range slider in two steps:",[246,247,248,254],"ol",{},[203,249,250,251,253],{},"Pass an array of values, and render one ",[32,252,216],{}," per value in that array",[203,255,256,257,260],{},"For server-side rendering, also give each thumb a numeric ",[32,258,259],{},"index"," matching the position of its value in the array",[13,262,263,264,267,268,271],{},"When two thumbs meet under the pointer, ",[32,265,266],{},"thumbCollisionBehavior"," on ",[32,269,270],{},"\u003CSlider.Root>"," decides what happens next.",[17,273],{"name":274},"slider\u002Frange-slider",[238,276,278],{"id":277},"examples-formatting-the-value","Formatting the value",[13,280,281,284,285,288,289,292,293,296,297,300],{},[32,282,283],{},"format"," and ",[32,286,287],{},"locale"," reach both ",[32,290,291],{},"\u003CSlider.Value>"," and the thumbs' ",[32,294,295],{},"aria-valuetext",". Use the default slot of ",[32,298,299],{},"Value"," to compose the text yourself:",[26,302,304],{"language":28,"meta":303,"class":30},"title=\"Composing the value text\"",[32,305,306,55,314,55,339,55,356,55,364],{"class":34},[36,307,308,310,312],{"class":38,"style":39},[36,309,43],{"style":42},[36,311,89],{"style":46},[36,313,54],{"style":42},[36,315,316,318,320,323,326,329,334,337],{"class":38,"style":39},[36,317,96],{"style":42},[36,319,119],{"style":46},[36,321,322],{"style":50}," v-slot",[36,324,325],{"style":42},"=",[36,327,328],{"style":70},"\"{ ",[36,330,333],{"style":70,"class":331},[332],"highlighted-word","formattedValues",[36,335,336],{"style":70}," }\"",[36,338,54],{"style":42},[36,340,341,344,347,350,353],{"class":38,"style":39},[36,342,343],{"style":42},"    {{ ",[36,345,333],{"style":42,"class":346},[332],[36,348,349],{"style":42},"[0] }} to {{ ",[36,351,333],{"style":42,"class":352},[332],[36,354,355],{"style":42},"[1] }}",[36,357,358,360,362],{"class":38,"style":39},[36,359,182],{"style":42},[36,361,119],{"style":46},[36,363,54],{"style":42},[36,365,366,368,370],{"class":38,"style":39},[36,367,76],{"style":42},[36,369,89],{"style":46},[36,371,54],{"style":42},[238,373,375],{"id":374},"examples-thumb-alignment","Thumb alignment",[13,377,378,379,382,383,386,387,390,391,394],{},"With the default ",[32,380,381],{},"\"center\""," alignment, a thumb at ",[32,384,385],{},"min"," or ",[32,388,389],{},"max"," overhangs the ends of the control; ",[32,392,393],{},"thumbAlignment=\"edge\""," insets it so its edge lines up with the control's edge.",[17,396],{"name":397},"slider\u002Fedge-alignment",[238,399,226],{"id":400},"examples-labeling-a-slider",[13,402,403,404,406,407,409],{},"When a single-thumb slider has no visible label — a volume control, say — put an ",[32,405,220],{}," on the ",[32,408,216],{},":",[26,411,414],{"language":28,"meta":412,"class":413},"title=\"Slider with invisible label\"","shiki shiki-themes github-light github-dark has-highlighted dark:github-dark",[32,415,416,55,424,55,432,55,440,55,448,55,456,55,474,55,482,55,490,55,498],{"class":34},[36,417,418,420,422],{"class":38,"style":39},[36,419,43],{"style":42},[36,421,89],{"style":46},[36,423,54],{"style":42},[36,425,426,428,430],{"class":38,"style":39},[36,427,96],{"style":42},[36,429,99],{"style":46},[36,431,54],{"style":42},[36,433,434,436,438],{"class":38,"style":39},[36,435,106],{"style":42},[36,437,128],{"style":46},[36,439,54],{"style":42},[36,441,442,444,446],{"class":38,"style":39},[36,443,135],{"style":42},[36,445,138],{"style":46},[36,447,54],{"style":42},[36,449,450,452,454],{"class":38,"style":39},[36,451,145],{"style":42},[36,453,148],{"style":46},[36,455,112],{"style":42},[36,457,460,462,464,467,469,472],{"class":458,"style":39},[38,459],"highlighted",[36,461,145],{"style":42},[36,463,157],{"style":46},[36,465,466],{"style":50}," aria-label",[36,468,325],{"style":42},[36,470,471],{"style":70},"\"Volume\"",[36,473,112],{"style":42},[36,475,476,478,480],{"class":38,"style":39},[36,477,164],{"style":42},[36,479,138],{"style":46},[36,481,54],{"style":42},[36,483,484,486,488],{"class":38,"style":39},[36,485,173],{"style":42},[36,487,128],{"style":46},[36,489,54],{"style":42},[36,491,492,494,496],{"class":38,"style":39},[36,493,182],{"style":42},[36,495,99],{"style":46},[36,497,54],{"style":42},[36,499,500,502,504],{"class":38,"style":39},[36,501,76],{"style":42},[36,503,89],{"style":46},[36,505,54],{"style":42},[13,507,508,509,409],{},"If the label should be visible instead, render ",[32,510,212],{},[26,512,514],{"language":28,"meta":513,"class":413},"title=\"Slider with visible label\"",[32,515,516,55,524,55,532,55,546,55,554,55,562,55,570,55,578,55,586,55,594,55,602],{"class":34},[36,517,518,520,522],{"class":38,"style":39},[36,519,43],{"style":42},[36,521,89],{"style":46},[36,523,54],{"style":42},[36,525,526,528,530],{"class":38,"style":39},[36,527,96],{"style":42},[36,529,99],{"style":46},[36,531,54],{"style":42},[36,533,535,537,539,542,544],{"class":534,"style":39},[38,459],[36,536,106],{"style":42},[36,538,109],{"style":46},[36,540,541],{"style":42},">Volume\u003C\u002F",[36,543,109],{"style":46},[36,545,54],{"style":42},[36,547,548,550,552],{"class":38,"style":39},[36,549,106],{"style":42},[36,551,128],{"style":46},[36,553,54],{"style":42},[36,555,556,558,560],{"class":38,"style":39},[36,557,135],{"style":42},[36,559,138],{"style":46},[36,561,54],{"style":42},[36,563,564,566,568],{"class":38,"style":39},[36,565,145],{"style":42},[36,567,148],{"style":46},[36,569,112],{"style":42},[36,571,572,574,576],{"class":38,"style":39},[36,573,145],{"style":42},[36,575,157],{"style":46},[36,577,112],{"style":42},[36,579,580,582,584],{"class":38,"style":39},[36,581,164],{"style":42},[36,583,138],{"style":46},[36,585,54],{"style":42},[36,587,588,590,592],{"class":38,"style":39},[36,589,173],{"style":42},[36,591,128],{"style":46},[36,593,54],{"style":42},[36,595,596,598,600],{"class":38,"style":39},[36,597,182],{"style":42},[36,599,99],{"style":46},[36,601,54],{"style":42},[36,603,604,606,608],{"class":38,"style":39},[36,605,76],{"style":42},[36,607,89],{"style":46},[36,609,54],{"style":42},[13,611,612,613,615,616,217,618,620],{},"A multi-thumb range slider needs both: keep the visible ",[32,614,212],{},", and give each ",[32,617,216],{},[32,619,220],{}," so screen readers can tell one thumb from another:",[26,622,624],{"language":28,"meta":623,"class":413},"title=\"Labeling multi-thumb range sliders\"",[32,625,626,55,634,55,650,55,663,55,671,55,679,55,687,55,711,55,734,55,742,55,750,55,758],{"class":34},[36,627,628,630,632],{"class":38,"style":39},[36,629,43],{"style":42},[36,631,89],{"style":46},[36,633,54],{"style":42},[36,635,636,638,640,643,645,648],{"class":38,"style":39},[36,637,96],{"style":42},[36,639,99],{"style":46},[36,641,642],{"style":50}," :value",[36,644,325],{"style":42},[36,646,647],{"style":70},"\"[25, 75]\"",[36,649,54],{"style":42},[36,651,652,654,656,659,661],{"class":38,"style":39},[36,653,106],{"style":42},[36,655,109],{"style":46},[36,657,658],{"style":42},">Price range\u003C\u002F",[36,660,109],{"style":46},[36,662,54],{"style":42},[36,664,665,667,669],{"class":38,"style":39},[36,666,106],{"style":42},[36,668,128],{"style":46},[36,670,54],{"style":42},[36,672,673,675,677],{"class":38,"style":39},[36,674,135],{"style":42},[36,676,138],{"style":46},[36,678,54],{"style":42},[36,680,681,683,685],{"class":38,"style":39},[36,682,145],{"style":42},[36,684,148],{"style":46},[36,686,112],{"style":42},[36,688,690,692,694,697,699,702,704,706,709],{"class":689,"style":39},[38,459],[36,691,145],{"style":42},[36,693,157],{"style":46},[36,695,696],{"style":50}," :index",[36,698,325],{"style":42},[36,700,701],{"style":70},"\"0\"",[36,703,466],{"style":50},[36,705,325],{"style":42},[36,707,708],{"style":70},"\"Minimum price\"",[36,710,112],{"style":42},[36,712,714,716,718,720,722,725,727,729,732],{"class":713,"style":39},[38,459],[36,715,145],{"style":42},[36,717,157],{"style":46},[36,719,696],{"style":50},[36,721,325],{"style":42},[36,723,724],{"style":70},"\"1\"",[36,726,466],{"style":50},[36,728,325],{"style":42},[36,730,731],{"style":70},"\"Maximum price\"",[36,733,112],{"style":42},[36,735,736,738,740],{"class":38,"style":39},[36,737,164],{"style":42},[36,739,138],{"style":46},[36,741,54],{"style":42},[36,743,744,746,748],{"class":38,"style":39},[36,745,173],{"style":42},[36,747,128],{"style":46},[36,749,54],{"style":42},[36,751,752,754,756],{"class":38,"style":39},[36,753,182],{"style":42},[36,755,99],{"style":46},[36,757,54],{"style":42},[36,759,760,762,764],{"class":38,"style":39},[36,761,76],{"style":42},[36,763,89],{"style":46},[36,765,54],{"style":42},[238,767,769],{"id":768},"examples-vertical","Vertical",[13,771,772,773,776,777,232],{},"For a vertical slider, pass ",[32,774,775],{},"orientation=\"vertical\""," to ",[32,778,270],{},[17,780],{"name":781},"slider\u002Fvertical",[238,783,785],{"id":784},"examples-form-integration","Form integration",[13,787,788,789,791,792,795],{},"Give ",[32,790,270],{}," a ",[32,793,794],{},"name"," and its value is submitted with the surrounding form:",[26,797,799],{"language":28,"meta":798,"class":413},"title=\"Using Slider in a form\"",[32,800,801,55,809,55,818,55,835,55,847,55,855,55,863,55,872,55,880,55,889,55,897,55,905,55,913],{"class":34},[36,802,803,805,807],{"class":38,"style":39},[36,804,43],{"style":42},[36,806,89],{"style":46},[36,808,54],{"style":42},[36,810,811,813,816],{"class":38,"style":39},[36,812,96],{"style":42},[36,814,815],{"style":46},"Form",[36,817,54],{"style":42},[36,819,821,823,825,828,830,833],{"class":820,"style":39},[38,459],[36,822,106],{"style":42},[36,824,99],{"style":46},[36,826,827],{"style":50}," name",[36,829,325],{"style":42},[36,831,832],{"style":70},"\"volume\"",[36,834,54],{"style":42},[36,836,837,839,841,843,845],{"class":38,"style":39},[36,838,135],{"style":42},[36,840,109],{"style":46},[36,842,541],{"style":42},[36,844,109],{"style":46},[36,846,54],{"style":42},[36,848,849,851,853],{"class":38,"style":39},[36,850,135],{"style":42},[36,852,128],{"style":46},[36,854,54],{"style":42},[36,856,857,859,861],{"class":38,"style":39},[36,858,145],{"style":42},[36,860,138],{"style":46},[36,862,54],{"style":42},[36,864,865,868,870],{"class":38,"style":39},[36,866,867],{"style":42},"          \u003C",[36,869,148],{"style":46},[36,871,112],{"style":42},[36,873,874,876,878],{"class":38,"style":39},[36,875,867],{"style":42},[36,877,157],{"style":46},[36,879,112],{"style":42},[36,881,882,885,887],{"class":38,"style":39},[36,883,884],{"style":42},"        \u003C\u002F",[36,886,138],{"style":46},[36,888,54],{"style":42},[36,890,891,893,895],{"class":38,"style":39},[36,892,164],{"style":42},[36,894,128],{"style":46},[36,896,54],{"style":42},[36,898,899,901,903],{"class":38,"style":39},[36,900,173],{"style":42},[36,902,99],{"style":46},[36,904,54],{"style":42},[36,906,907,909,911],{"class":38,"style":39},[36,908,182],{"style":42},[36,910,815],{"style":46},[36,912,54],{"style":42},[36,914,915,917,919],{"class":38,"style":39},[36,916,76],{"style":42},[36,918,89],{"style":46},[36,920,54],{"style":42},[13,922,923,924,928,929,409],{},"For a grouped multi-thumb range slider in a form, nest it in a ",[223,925,927],{"href":926},"\u002Ffieldset","Fieldset",": the legend names the group while each thumb keeps its own ",[32,930,220],{},[26,932,934],{"language":28,"meta":933,"class":413},"title=\"Using Fieldset with a multi-thumb slider\"",[32,935,936,55,944,55,953,55,963,55,977,55,991,55,999,55,1007,55,1016,55,1037,55,1058,55,1067,55,1075,55,1083,55,1091,55,1099],{"class":34},[36,937,938,940,942],{"class":38,"style":39},[36,939,43],{"style":42},[36,941,89],{"style":46},[36,943,54],{"style":42},[36,945,946,948,951],{"class":38,"style":39},[36,947,96],{"style":42},[36,949,950],{"style":46},"Field.Root",[36,952,54],{"style":42},[36,954,956,958,961],{"class":955,"style":39},[38,459],[36,957,106],{"style":42},[36,959,960],{"style":46},"Fieldset.Root",[36,962,54],{"style":42},[36,964,966,968,971,973,975],{"class":965,"style":39},[38,459],[36,967,135],{"style":42},[36,969,970],{"style":46},"Fieldset.Legend",[36,972,658],{"style":42},[36,974,970],{"style":46},[36,976,54],{"style":42},[36,978,979,981,983,985,987,989],{"class":38,"style":39},[36,980,135],{"style":42},[36,982,99],{"style":46},[36,984,642],{"style":50},[36,986,325],{"style":42},[36,988,647],{"style":70},[36,990,54],{"style":42},[36,992,993,995,997],{"class":38,"style":39},[36,994,145],{"style":42},[36,996,128],{"style":46},[36,998,54],{"style":42},[36,1000,1001,1003,1005],{"class":38,"style":39},[36,1002,867],{"style":42},[36,1004,138],{"style":46},[36,1006,54],{"style":42},[36,1008,1009,1012,1014],{"class":38,"style":39},[36,1010,1011],{"style":42},"            \u003C",[36,1013,148],{"style":46},[36,1015,112],{"style":42},[36,1017,1019,1021,1023,1025,1027,1029,1031,1033,1035],{"class":1018,"style":39},[38,459],[36,1020,1011],{"style":42},[36,1022,157],{"style":46},[36,1024,696],{"style":50},[36,1026,325],{"style":42},[36,1028,701],{"style":70},[36,1030,466],{"style":50},[36,1032,325],{"style":42},[36,1034,708],{"style":70},[36,1036,112],{"style":42},[36,1038,1040,1042,1044,1046,1048,1050,1052,1054,1056],{"class":1039,"style":39},[38,459],[36,1041,1011],{"style":42},[36,1043,157],{"style":46},[36,1045,696],{"style":50},[36,1047,325],{"style":42},[36,1049,724],{"style":70},[36,1051,466],{"style":50},[36,1053,325],{"style":42},[36,1055,731],{"style":70},[36,1057,112],{"style":42},[36,1059,1060,1063,1065],{"class":38,"style":39},[36,1061,1062],{"style":42},"          \u003C\u002F",[36,1064,138],{"style":46},[36,1066,54],{"style":42},[36,1068,1069,1071,1073],{"class":38,"style":39},[36,1070,884],{"style":42},[36,1072,128],{"style":46},[36,1074,54],{"style":42},[36,1076,1077,1079,1081],{"class":38,"style":39},[36,1078,164],{"style":42},[36,1080,99],{"style":46},[36,1082,54],{"style":42},[36,1084,1085,1087,1089],{"class":38,"style":39},[36,1086,173],{"style":42},[36,1088,960],{"style":46},[36,1090,54],{"style":42},[36,1092,1093,1095,1097],{"class":38,"style":39},[36,1094,182],{"style":42},[36,1096,950],{"style":46},[36,1098,54],{"style":42},[36,1100,1101,1103,1105],{"class":38,"style":39},[36,1102,76],{"style":42},[36,1104,89],{"style":46},[36,1106,54],{"style":42},[21,1108,1110],{"id":1109},"api-reference","API reference",[238,1112,1114],{"id":1113},"api-reference-root","Root",[13,1116,1117,1118,1121,1122,232],{},"Groups all parts of the slider.\nRenders a ",[32,1119,1120],{},"\u003Cdiv>"," element with ",[32,1123,1124],{},"role=\"group\"",[1126,1127],"table",{"columns":1128,"rows":1132},[1129,1130,1131],"Prop","Type","Default",[1133,1145,1156,1165,1175,1186,1196,1206,1216,1226,1237,1248,1257,1268,1279,1288,1297,1307,1317,1326,1335,1345,1354],{"summary":1134,"detail":1138},[1135,1136,1137],"\u003Ccode>as\u003C\u002Fcode>","\u003Ccode>keyof HTMLElementTagNameMap\u003C\u002Fcode>","\u003Ccode>'div'\u003C\u002Fcode>",[1139,1140,1141,1142],{"label":1129,"html":1135},{"label":1130,"html":1136},{"label":1131,"html":1137},{"label":1143,"html":1144},"Description","HTML element to render.",{"summary":1146,"detail":1150},[1147,1148,1149],"\u003Ccode>class\u003C\u002Fcode>","\u003Ccode>string\u003C\u002Fcode>","—",[1151,1152,1153,1154],{"label":1129,"html":1147},{"label":1130,"html":1148},{"label":1131,"html":1149},{"label":1143,"html":1155},"CSS class applied to the element.",{"summary":1157,"detail":1159},[1158,1148,1149],"\u003Ccode>style\u003C\u002Fcode>",[1160,1161,1162,1163],{"label":1129,"html":1158},{"label":1130,"html":1148},{"label":1131,"html":1149},{"label":1143,"html":1164},"Inline style applied to the element.",{"summary":1166,"detail":1169},[1167,1148,1168],"\u003Ccode>id\u003C\u002Fcode>","auto",[1170,1171,1172,1173],{"label":1129,"html":1167},{"label":1130,"html":1148},{"label":1131,"html":1168},{"label":1143,"html":1174},"Custom element ID.",{"summary":1176,"detail":1180},[1177,1178,1179],"\u003Ccode>value\u003C\u002Fcode>","\u003Ccode>number | readonly number[]\u003C\u002Fcode>","\u003Ccode>min\u003C\u002Fcode>",[1181,1182,1183,1184],{"label":1129,"html":1177},{"label":1130,"html":1178},{"label":1131,"html":1179},{"label":1143,"html":1185},"The slider value; an array makes it a range slider. Pass an initial value for uncontrolled use, or \u003Ccode>v-model:value\u003C\u002Fcode> to control it.",{"summary":1187,"detail":1190},[1179,1188,1189],"\u003Ccode>number\u003C\u002Fcode>","\u003Ccode>0\u003C\u002Fcode>",[1191,1192,1193,1194],{"label":1129,"html":1179},{"label":1130,"html":1188},{"label":1131,"html":1189},{"label":1143,"html":1195},"Minimum allowed value.",{"summary":1197,"detail":1200},[1198,1188,1199],"\u003Ccode>max\u003C\u002Fcode>","\u003Ccode>100\u003C\u002Fcode>",[1201,1202,1203,1204],{"label":1129,"html":1198},{"label":1130,"html":1188},{"label":1131,"html":1199},{"label":1143,"html":1205},"Maximum allowed value.",{"summary":1207,"detail":1210},[1208,1188,1209],"\u003Ccode>step\u003C\u002Fcode>","\u003Ccode>1\u003C\u002Fcode>",[1211,1212,1213,1214],{"label":1129,"html":1208},{"label":1130,"html":1188},{"label":1131,"html":1209},{"label":1143,"html":1215},"Granularity the value changes by.",{"summary":1217,"detail":1220},[1218,1188,1219],"\u003Ccode>largeStep\u003C\u002Fcode>","\u003Ccode>10\u003C\u002Fcode>",[1221,1222,1223,1224],{"label":1129,"html":1218},{"label":1130,"html":1188},{"label":1131,"html":1219},{"label":1143,"html":1225},"Granularity for \u003Ccode>PageUp\u003C\u002Fcode>\u002F\u003Ccode>PageDown\u003C\u002Fcode> and \u003Ccode>Shift + Arrow\u003C\u002Fcode>.",{"summary":1227,"detail":1231},[1228,1229,1230],"\u003Ccode>orientation\u003C\u002Fcode>","\u003Ccode>'horizontal' | 'vertical'\u003C\u002Fcode>","\u003Ccode>'horizontal'\u003C\u002Fcode>",[1232,1233,1234,1235],{"label":1129,"html":1228},{"label":1130,"html":1229},{"label":1131,"html":1230},{"label":1143,"html":1236},"Axis the slider runs along.",{"summary":1238,"detail":1242},[1239,1240,1241],"\u003Ccode>disabled\u003C\u002Fcode>","\u003Ccode>boolean\u003C\u002Fcode>","\u003Ccode>false\u003C\u002Fcode>",[1243,1244,1245,1246],{"label":1129,"html":1239},{"label":1130,"html":1240},{"label":1131,"html":1241},{"label":1143,"html":1247},"Disables the thumb inputs, stops pointer interaction, and blurs the slider if it holds focus.",{"summary":1249,"detail":1251},[1250,1188,1189],"\u003Ccode>minStepsBetweenValues\u003C\u002Fcode>",[1252,1253,1254,1255],{"label":1129,"html":1250},{"label":1130,"html":1188},{"label":1131,"html":1189},{"label":1143,"html":1256},"Minimum number of steps between neighbouring thumbs on a range slider.",{"summary":1258,"detail":1262},[1259,1260,1261],"\u003Ccode>thumbCollisionBehavior\u003C\u002Fcode>","\u003Ccode>'push' | 'swap' | 'none'\u003C\u002Fcode>","\u003Ccode>'push'\u003C\u002Fcode>",[1263,1264,1265,1266],{"label":1129,"html":1259},{"label":1130,"html":1260},{"label":1131,"html":1261},{"label":1143,"html":1267},"What a dragged thumb does when it reaches its neighbour: push it along, swap places with it — focus follows the swap — or stop against it.",{"summary":1269,"detail":1273},[1270,1271,1272],"\u003Ccode>thumbAlignment\u003C\u002Fcode>","\u003Ccode>'center' | 'edge'\u003C\u002Fcode>","\u003Ccode>'center'\u003C\u002Fcode>",[1274,1275,1276,1277],{"label":1129,"html":1270},{"label":1130,"html":1271},{"label":1131,"html":1272},{"label":1143,"html":1278},"How the thumb aligns to the track. \u003Ccode>'center'\u003C\u002Fcode> centres the thumb on its value; \u003Ccode>'edge'\u003C\u002Fcode> insets it so its edge meets the control's edge at \u003Ccode>min\u003C\u002Fcode> and \u003Ccode>max\u003C\u002Fcode>.",{"summary":1280,"detail":1282},[1281,1148,1149],"\u003Ccode>name\u003C\u002Fcode>",[1283,1284,1285,1286],{"label":1129,"html":1281},{"label":1130,"html":1148},{"label":1131,"html":1149},{"label":1143,"html":1287},"Name submitted with the form, applied to every thumb input. Inside \u003Ccode>Field.Root\u003C\u002Fcode>, the field's \u003Ccode>name\u003C\u002Fcode> wins.",{"summary":1289,"detail":1291},[1290,1148,1149],"\u003Ccode>form\u003C\u002Fcode>",[1292,1293,1294,1295],{"label":1129,"html":1290},{"label":1130,"html":1148},{"label":1131,"html":1149},{"label":1143,"html":1296},"ID of the form the thumb inputs belong to when rendered outside it.",{"summary":1298,"detail":1301},[1299,1300,1149],"\u003Ccode>format\u003C\u002Fcode>","\u003Ccode>Intl.NumberFormatOptions\u003C\u002Fcode>",[1302,1303,1304,1305],{"label":1129,"html":1299},{"label":1130,"html":1300},{"label":1131,"html":1149},{"label":1143,"html":1306},"Options to format the value. Used by \u003Ccode>Slider.Value\u003C\u002Fcode> and the thumbs' \u003Ccode>aria-valuetext\u003C\u002Fcode>.",{"summary":1308,"detail":1311},[1309,1310,1149],"\u003Ccode>locale\u003C\u002Fcode>","\u003Ccode>Intl.LocalesArgument\u003C\u002Fcode>",[1312,1313,1314,1315],{"label":1129,"html":1309},{"label":1130,"html":1310},{"label":1131,"html":1149},{"label":1143,"html":1316},"The locale used by \u003Ccode>Intl.NumberFormat\u003C\u002Fcode> when formatting the value. Defaults to the user's runtime locale.",{"summary":1318,"detail":1320},[1319,1148,1149],"\u003Ccode>aria-labelledby\u003C\u002Fcode>",[1321,1322,1323,1324],{"label":1129,"html":1319},{"label":1130,"html":1148},{"label":1131,"html":1149},{"label":1143,"html":1325},"ID of the element naming the slider. Takes precedence over \u003Ccode>Slider.Label\u003C\u002Fcode>.",{"summary":1327,"detail":1329},[1328,1148,1149],"\u003Ccode>aria-describedby\u003C\u002Fcode>",[1330,1331,1332,1333],{"label":1129,"html":1328},{"label":1130,"html":1148},{"label":1131,"html":1149},{"label":1143,"html":1334},"ID of the element describing the slider; merged with Field message IDs when wrapped in \u003Ccode>Field.Root\u003C\u002Fcode>.",{"summary":1336,"detail":1339},[1337,1338,1149],"\u003Ccode>update:value\u003C\u002Fcode>","\u003Ccode>(value: number | number[]) => void\u003C\u002Fcode>",[1340,1341,1342,1343],{"label":1129,"html":1337},{"label":1130,"html":1338},{"label":1131,"html":1149},{"label":1143,"html":1344},"Emitted whenever the value changes.",{"summary":1346,"detail":1348},[1347,1338,1149],"\u003Ccode>valueCommitted\u003C\u002Fcode>",[1349,1350,1351,1352],{"label":1129,"html":1347},{"label":1130,"html":1338},{"label":1131,"html":1149},{"label":1143,"html":1353},"Emitted when the value settles: on pointer release, or right after a keyboard or input change.",{"summary":1355,"detail":1358},[1356,1357,1149],"\u003Ccode>default\u003C\u002Fcode>","\u003Ccode>Slot<{ touched, dirty, filled, focused, valid, activeThumbIndex, disabled, dragging, orientation, max, min, minStepsBetweenValues, step, values }>\u003C\u002Fcode>",[1359,1360,1361,1362],{"label":1129,"html":1356},{"label":1130,"html":1357},{"label":1131,"html":1149},{"label":1143,"html":1363},"Content; receives the slider state.",[1126,1365,1366,1379],{},[1367,1368,1369],"thead",{},[1370,1371,1372,1377],"tr",{},[1373,1374,1376],"th",{"style":1375},"text-align:left","Attribute",[1373,1378,1143],{"style":1375},[1380,1381,1382,1393,1403,1413,1426,1438,1450,1462],"tbody",{},[1370,1383,1384,1390],{},[1385,1386,1387],"td",{"style":1375},[32,1388,1389],{},"data-dragging",[1385,1391,1392],{"style":1375},"Present while the user is dragging.",[1370,1394,1395,1400],{},[1385,1396,1397],{"style":1375},[32,1398,1399],{},"data-orientation",[1385,1401,1402],{"style":1375},"Indicates the orientation of the slider.",[1370,1404,1405,1410],{},[1385,1406,1407],{"style":1375},[32,1408,1409],{},"data-disabled",[1385,1411,1412],{"style":1375},"Present when the slider is disabled.",[1370,1414,1415,1420],{},[1385,1416,1417],{"style":1375},[32,1418,1419],{},"data-valid",[1385,1421,1422,1423,1425],{"style":1375},"Present when the field is valid (when wrapped in ",[32,1424,950],{},").",[1370,1427,1428,1433],{},[1385,1429,1430],{"style":1375},[32,1431,1432],{},"data-invalid",[1385,1434,1435,1436,1425],{"style":1375},"Present when the field is invalid (when wrapped in ",[32,1437,950],{},[1370,1439,1440,1445],{},[1385,1441,1442],{"style":1375},[32,1443,1444],{},"data-touched",[1385,1446,1447,1448,1425],{"style":1375},"Present when the field has been touched (when wrapped in ",[32,1449,950],{},[1370,1451,1452,1457],{},[1385,1453,1454],{"style":1375},[32,1455,1456],{},"data-dirty",[1385,1458,1459,1460,1425],{"style":1375},"Present when the value has changed (when wrapped in ",[32,1461,950],{},[1370,1463,1464,1469],{},[1385,1465,1466],{"style":1375},[32,1467,1468],{},"data-focused",[1385,1470,1471,1472,1425],{"style":1375},"Present when focused (when wrapped in ",[32,1473,950],{},[238,1475,1477],{"id":1476},"api-reference-label","Label",[13,1479,1480,1481,1484,1485,1487],{},"An accessible label for the slider, associated with every thumb. Clicking it focuses the thumb of a\nsingle-thumb slider. Its ID defaults to one derived from the root's, and can be overridden with ",[32,1482,1483],{},"id",".\nRenders a ",[32,1486,1120],{}," element.",[1126,1489],{"columns":1490,"rows":1491},[1129,1130,1131],[1492,1499,1506,1513],{"summary":1493,"detail":1494},[1135,1136,1137],[1495,1496,1497,1498],{"label":1129,"html":1135},{"label":1130,"html":1136},{"label":1131,"html":1137},{"label":1143,"html":1144},{"summary":1500,"detail":1501},[1147,1148,1149],[1502,1503,1504,1505],{"label":1129,"html":1147},{"label":1130,"html":1148},{"label":1131,"html":1149},{"label":1143,"html":1155},{"summary":1507,"detail":1508},[1158,1148,1149],[1509,1510,1511,1512],{"label":1129,"html":1158},{"label":1130,"html":1148},{"label":1131,"html":1149},{"label":1143,"html":1164},{"summary":1514,"detail":1515},[1356,1357,1149],[1516,1517,1518,1519],{"label":1129,"html":1356},{"label":1130,"html":1357},{"label":1131,"html":1149},{"label":1143,"html":1520},"Label content; receives the slider state.",[1126,1522,1523,1531],{},[1367,1524,1525],{},[1370,1526,1527,1529],{},[1373,1528,1376],{"style":1375},[1373,1530,1143],{"style":1375},[1380,1532,1533,1541,1549,1557,1567,1577,1587,1597],{},[1370,1534,1535,1539],{},[1385,1536,1537],{"style":1375},[32,1538,1389],{},[1385,1540,1392],{"style":1375},[1370,1542,1543,1547],{},[1385,1544,1545],{"style":1375},[32,1546,1399],{},[1385,1548,1402],{"style":1375},[1370,1550,1551,1555],{},[1385,1552,1553],{"style":1375},[32,1554,1409],{},[1385,1556,1412],{"style":1375},[1370,1558,1559,1563],{},[1385,1560,1561],{"style":1375},[32,1562,1419],{},[1385,1564,1422,1565,1425],{"style":1375},[32,1566,950],{},[1370,1568,1569,1573],{},[1385,1570,1571],{"style":1375},[32,1572,1432],{},[1385,1574,1435,1575,1425],{"style":1375},[32,1576,950],{},[1370,1578,1579,1583],{},[1385,1580,1581],{"style":1375},[32,1582,1444],{},[1385,1584,1447,1585,1425],{"style":1375},[32,1586,950],{},[1370,1588,1589,1593],{},[1385,1590,1591],{"style":1375},[32,1592,1456],{},[1385,1594,1459,1595,1425],{"style":1375},[32,1596,950],{},[1370,1598,1599,1603],{},[1385,1600,1601],{"style":1375},[32,1602,1468],{},[1385,1604,1471,1605,1425],{"style":1375},[32,1606,950],{},[238,1608,299],{"id":1609},"api-reference-value",[13,1611,1612,1613,1616,1617,232],{},"Displays the current value of the slider as text.\nRenders an ",[32,1614,1615],{},"\u003Coutput>"," element pointing at the thumb inputs through ",[32,1618,1619],{},"for",[1126,1621],{"columns":1622,"rows":1623},[1129,1130,1131],[1624,1632,1639,1646,1657],{"summary":1625,"detail":1627},[1135,1136,1626],"\u003Ccode>'output'\u003C\u002Fcode>",[1628,1629,1630,1631],{"label":1129,"html":1135},{"label":1130,"html":1136},{"label":1131,"html":1626},{"label":1143,"html":1144},{"summary":1633,"detail":1634},[1147,1148,1149],[1635,1636,1637,1638],{"label":1129,"html":1147},{"label":1130,"html":1148},{"label":1131,"html":1149},{"label":1143,"html":1155},{"summary":1640,"detail":1641},[1158,1148,1149],[1642,1643,1644,1645],{"label":1129,"html":1158},{"label":1130,"html":1148},{"label":1131,"html":1149},{"label":1143,"html":1164},{"summary":1647,"detail":1651},[1648,1649,1650],"\u003Ccode>aria-live\u003C\u002Fcode>","\u003Ccode>'off' | 'polite' | 'assertive'\u003C\u002Fcode>","\u003Ccode>'off'\u003C\u002Fcode>",[1652,1653,1654,1655],{"label":1129,"html":1648},{"label":1130,"html":1649},{"label":1131,"html":1650},{"label":1143,"html":1656},"Politeness of the \u003Ccode><output>\u003C\u002Fcode> live region. Off by default, since each thumb already reports its own value.",{"summary":1658,"detail":1660},[1356,1659,1149],"\u003Ccode>Slot<{ formattedValues: string[], values: number[] }>\u003C\u002Fcode>",[1661,1662,1663,1664],{"label":1129,"html":1356},{"label":1130,"html":1659},{"label":1131,"html":1149},{"label":1143,"html":1665},"Slot receiving the formatted values and the raw numbers. Without it, the formatted values are rendered joined by an en dash.",[1126,1667,1668,1676],{},[1367,1669,1670],{},[1370,1671,1672,1674],{},[1373,1673,1376],{"style":1375},[1373,1675,1143],{"style":1375},[1380,1677,1678,1686,1694,1702,1712,1722,1732,1742],{},[1370,1679,1680,1684],{},[1385,1681,1682],{"style":1375},[32,1683,1389],{},[1385,1685,1392],{"style":1375},[1370,1687,1688,1692],{},[1385,1689,1690],{"style":1375},[32,1691,1399],{},[1385,1693,1402],{"style":1375},[1370,1695,1696,1700],{},[1385,1697,1698],{"style":1375},[32,1699,1409],{},[1385,1701,1412],{"style":1375},[1370,1703,1704,1708],{},[1385,1705,1706],{"style":1375},[32,1707,1419],{},[1385,1709,1422,1710,1425],{"style":1375},[32,1711,950],{},[1370,1713,1714,1718],{},[1385,1715,1716],{"style":1375},[32,1717,1432],{},[1385,1719,1435,1720,1425],{"style":1375},[32,1721,950],{},[1370,1723,1724,1728],{},[1385,1725,1726],{"style":1375},[32,1727,1444],{},[1385,1729,1447,1730,1425],{"style":1375},[32,1731,950],{},[1370,1733,1734,1738],{},[1385,1735,1736],{"style":1375},[32,1737,1456],{},[1385,1739,1459,1740,1425],{"style":1375},[32,1741,950],{},[1370,1743,1744,1748],{},[1385,1745,1746],{"style":1375},[32,1747,1468],{},[1385,1749,1471,1750,1425],{"style":1375},[32,1751,950],{},[238,1753,1755],{"id":1754},"api-reference-control","Control",[13,1757,1758,1759,1487],{},"The interactive area of the slider: pressing anywhere inside it moves the nearest enabled thumb to\nthat position and starts a drag.\nRenders a ",[32,1760,1120],{},[1126,1762],{"columns":1763,"rows":1764},[1129,1130,1131],[1765,1772,1779,1786],{"summary":1766,"detail":1767},[1135,1136,1137],[1768,1769,1770,1771],{"label":1129,"html":1135},{"label":1130,"html":1136},{"label":1131,"html":1137},{"label":1143,"html":1144},{"summary":1773,"detail":1774},[1147,1148,1149],[1775,1776,1777,1778],{"label":1129,"html":1147},{"label":1130,"html":1148},{"label":1131,"html":1149},{"label":1143,"html":1155},{"summary":1780,"detail":1781},[1158,1148,1149],[1782,1783,1784,1785],{"label":1129,"html":1158},{"label":1130,"html":1148},{"label":1131,"html":1149},{"label":1143,"html":1164},{"summary":1787,"detail":1788},[1356,1357,1149],[1789,1790,1791,1792],{"label":1129,"html":1356},{"label":1130,"html":1357},{"label":1131,"html":1149},{"label":1143,"html":1793},"Control content; receives the slider state.",[1126,1795,1796,1804],{},[1367,1797,1798],{},[1370,1799,1800,1802],{},[1373,1801,1376],{"style":1375},[1373,1803,1143],{"style":1375},[1380,1805,1806,1814,1822,1830,1840,1850,1860,1870],{},[1370,1807,1808,1812],{},[1385,1809,1810],{"style":1375},[32,1811,1389],{},[1385,1813,1392],{"style":1375},[1370,1815,1816,1820],{},[1385,1817,1818],{"style":1375},[32,1819,1399],{},[1385,1821,1402],{"style":1375},[1370,1823,1824,1828],{},[1385,1825,1826],{"style":1375},[32,1827,1409],{},[1385,1829,1412],{"style":1375},[1370,1831,1832,1836],{},[1385,1833,1834],{"style":1375},[32,1835,1419],{},[1385,1837,1422,1838,1425],{"style":1375},[32,1839,950],{},[1370,1841,1842,1846],{},[1385,1843,1844],{"style":1375},[32,1845,1432],{},[1385,1847,1435,1848,1425],{"style":1375},[32,1849,950],{},[1370,1851,1852,1856],{},[1385,1853,1854],{"style":1375},[32,1855,1444],{},[1385,1857,1447,1858,1425],{"style":1375},[32,1859,950],{},[1370,1861,1862,1866],{},[1385,1863,1864],{"style":1375},[32,1865,1456],{},[1385,1867,1459,1868,1425],{"style":1375},[32,1869,950],{},[1370,1871,1872,1876],{},[1385,1873,1874],{"style":1375},[32,1875,1468],{},[1385,1877,1471,1878,1425],{"style":1375},[32,1879,950],{},[238,1881,1883],{"id":1882},"api-reference-track","Track",[13,1885,1886,1887,1890,1891,1487],{},"Contains the indicator and the thumbs, and represents the entire range of the slider. ",[32,1888,1889],{},"position: relative"," is set inline so the thumbs can be positioned against it.\nRenders a ",[32,1892,1120],{},[1126,1894],{"columns":1895,"rows":1896},[1129,1130,1131],[1897,1904,1911,1919],{"summary":1898,"detail":1899},[1135,1136,1137],[1900,1901,1902,1903],{"label":1129,"html":1135},{"label":1130,"html":1136},{"label":1131,"html":1137},{"label":1143,"html":1144},{"summary":1905,"detail":1906},[1147,1148,1149],[1907,1908,1909,1910],{"label":1129,"html":1147},{"label":1130,"html":1148},{"label":1131,"html":1149},{"label":1143,"html":1155},{"summary":1912,"detail":1913},[1158,1148,1149],[1914,1915,1916,1917],{"label":1129,"html":1158},{"label":1130,"html":1148},{"label":1131,"html":1149},{"label":1143,"html":1918},"Inline style applied to the element, after the built-in \u003Ccode>position\u003C\u002Fcode>.",{"summary":1920,"detail":1921},[1356,1357,1149],[1922,1923,1924,1925],{"label":1129,"html":1356},{"label":1130,"html":1357},{"label":1131,"html":1149},{"label":1143,"html":1926},"Track content; receives the slider state.",[1126,1928,1929,1937],{},[1367,1930,1931],{},[1370,1932,1933,1935],{},[1373,1934,1376],{"style":1375},[1373,1936,1143],{"style":1375},[1380,1938,1939,1947,1955,1963,1973,1983,1993,2003],{},[1370,1940,1941,1945],{},[1385,1942,1943],{"style":1375},[32,1944,1389],{},[1385,1946,1392],{"style":1375},[1370,1948,1949,1953],{},[1385,1950,1951],{"style":1375},[32,1952,1399],{},[1385,1954,1402],{"style":1375},[1370,1956,1957,1961],{},[1385,1958,1959],{"style":1375},[32,1960,1409],{},[1385,1962,1412],{"style":1375},[1370,1964,1965,1969],{},[1385,1966,1967],{"style":1375},[32,1968,1419],{},[1385,1970,1422,1971,1425],{"style":1375},[32,1972,950],{},[1370,1974,1975,1979],{},[1385,1976,1977],{"style":1375},[32,1978,1432],{},[1385,1980,1435,1981,1425],{"style":1375},[32,1982,950],{},[1370,1984,1985,1989],{},[1385,1986,1987],{"style":1375},[32,1988,1444],{},[1385,1990,1447,1991,1425],{"style":1375},[32,1992,950],{},[1370,1994,1995,1999],{},[1385,1996,1997],{"style":1375},[32,1998,1456],{},[1385,2000,1459,2001,1425],{"style":1375},[32,2002,950],{},[1370,2004,2005,2009],{},[1385,2006,2007],{"style":1375},[32,2008,1468],{},[1385,2010,1471,2011,1425],{"style":1375},[32,2012,950],{},[238,2014,2016],{"id":2015},"api-reference-indicator","Indicator",[13,2018,2019,2020,284,2022,1484,2024,1487],{},"Visualizes the current value of the slider. Its offset and length along the track are set inline,\nfrom the values' percentage positions between ",[32,2021,385],{},[32,2023,389],{},[32,2025,1120],{},[1126,2027],{"columns":2028,"rows":2029},[1129,1130,1131],[2030,2037,2044,2052],{"summary":2031,"detail":2032},[1135,1136,1137],[2033,2034,2035,2036],{"label":1129,"html":1135},{"label":1130,"html":1136},{"label":1131,"html":1137},{"label":1143,"html":1144},{"summary":2038,"detail":2039},[1147,1148,1149],[2040,2041,2042,2043],{"label":1129,"html":1147},{"label":1130,"html":1148},{"label":1131,"html":1149},{"label":1143,"html":1155},{"summary":2045,"detail":2046},[1158,1148,1149],[2047,2048,2049,2050],{"label":1129,"html":1158},{"label":1130,"html":1148},{"label":1131,"html":1149},{"label":1143,"html":2051},"Inline style applied to the element, after the built-in positioning.",{"summary":2053,"detail":2054},[1356,1357,1149],[2055,2056,2057,2058],{"label":1129,"html":1356},{"label":1130,"html":1357},{"label":1131,"html":1149},{"label":1143,"html":2059},"Indicator content; receives the slider state.",[1126,2061,2062,2070],{},[1367,2063,2064],{},[1370,2065,2066,2068],{},[1373,2067,1376],{"style":1375},[1373,2069,1143],{"style":1375},[1380,2071,2072,2080,2088,2096,2106,2116,2126,2136],{},[1370,2073,2074,2078],{},[1385,2075,2076],{"style":1375},[32,2077,1389],{},[1385,2079,1392],{"style":1375},[1370,2081,2082,2086],{},[1385,2083,2084],{"style":1375},[32,2085,1399],{},[1385,2087,1402],{"style":1375},[1370,2089,2090,2094],{},[1385,2091,2092],{"style":1375},[32,2093,1409],{},[1385,2095,1412],{"style":1375},[1370,2097,2098,2102],{},[1385,2099,2100],{"style":1375},[32,2101,1419],{},[1385,2103,1422,2104,1425],{"style":1375},[32,2105,950],{},[1370,2107,2108,2112],{},[1385,2109,2110],{"style":1375},[32,2111,1432],{},[1385,2113,1435,2114,1425],{"style":1375},[32,2115,950],{},[1370,2117,2118,2122],{},[1385,2119,2120],{"style":1375},[32,2121,1444],{},[1385,2123,1447,2124,1425],{"style":1375},[32,2125,950],{},[1370,2127,2128,2132],{},[1385,2129,2130],{"style":1375},[32,2131,1456],{},[1385,2133,1459,2134,1425],{"style":1375},[32,2135,950],{},[1370,2137,2138,2142],{},[1385,2139,2140],{"style":1375},[32,2141,1468],{},[1385,2143,1471,2144,1425],{"style":1375},[32,2145,950],{},[238,2147,2149],{"id":2148},"api-reference-thumb","Thumb",[13,2151,2152,2153,2155,2156,2159],{},"The draggable part of the slider at the tip of the indicator. Its offset along the track is set\ninline.\nRenders a ",[32,2154,1120],{}," wrapping a visually hidden ",[32,2157,2158],{},"\u003Cinput type=\"range\">",", which takes focus and carries\nthe thumb's value and ARIA.",[1126,2161],{"columns":2162,"rows":2163},[1129,1130,1131],[2164,2171,2178,2185,2193,2202,2211,2219,2227,2236,2244,2253,2263,2272,2282],{"summary":2165,"detail":2166},[1135,1136,1137],[2167,2168,2169,2170],{"label":1129,"html":1135},{"label":1130,"html":1136},{"label":1131,"html":1137},{"label":1143,"html":1144},{"summary":2172,"detail":2173},[1147,1148,1149],[2174,2175,2176,2177],{"label":1129,"html":1147},{"label":1130,"html":1148},{"label":1131,"html":1149},{"label":1143,"html":1155},{"summary":2179,"detail":2180},[1158,1148,1149],[2181,2182,2183,2184],{"label":1129,"html":1158},{"label":1130,"html":1148},{"label":1131,"html":1149},{"label":1143,"html":2051},{"summary":2186,"detail":2187},[1167,1148,1168],[2188,2189,2190,2191],{"label":1129,"html":1167},{"label":1130,"html":1148},{"label":1131,"html":1168},{"label":1143,"html":2192},"Custom element ID, applied to the thumb element.",{"summary":2194,"detail":2196},[2195,1188,1149],"\u003Ccode>index\u003C\u002Fcode>",[2197,2198,2199,2200],{"label":1129,"html":2195},{"label":1130,"html":1188},{"label":1131,"html":1149},{"label":1143,"html":2201},"The thumb's index in the values array. Needed on a server-rendered range slider; otherwise it is read from DOM order.",{"summary":2203,"detail":2205},[2204,1148,1149],"\u003Ccode>aria-label\u003C\u002Fcode>",[2206,2207,2208,2209],{"label":1129,"html":2204},{"label":1130,"html":1148},{"label":1131,"html":1149},{"label":1143,"html":2210},"Accessible name for the thumb's input.",{"summary":2212,"detail":2213},[1319,1148,1149],[2214,2215,2216,2217],{"label":1129,"html":1319},{"label":1130,"html":1148},{"label":1131,"html":1149},{"label":1143,"html":2218},"Forwarded to the input. Falls back to \u003Ccode>Slider.Label\u003C\u002Fcode> when no \u003Ccode>aria-label\u003C\u002Fcode> is set.",{"summary":2220,"detail":2221},[1328,1148,1149],[2222,2223,2224,2225],{"label":1129,"html":1328},{"label":1130,"html":1148},{"label":1131,"html":1149},{"label":1143,"html":2226},"Forwarded to the input; merged with Field message IDs when wrapped in \u003Ccode>Field.Root\u003C\u002Fcode>.",{"summary":2228,"detail":2230},[2229,1148,1149],"\u003Ccode>aria-valuetext\u003C\u002Fcode>",[2231,2232,2233,2234],{"label":1129,"html":2229},{"label":1130,"html":1148},{"label":1131,"html":1149},{"label":1143,"html":2235},"Forwarded to the input. Without it, a two-thumb slider announces \u003Ccode><value> start range\u003C\u002Fcode> and \u003Ccode><value> end range\u003C\u002Fcode>.",{"summary":2237,"detail":2238},[1239,1240,1241],[2239,2240,2241,2242],{"label":1129,"html":1239},{"label":1130,"html":1240},{"label":1131,"html":1241},{"label":1143,"html":2243},"Disables this thumb's input and takes it out of pointer targeting.",{"summary":2245,"detail":2247},[2246,1188,1149],"\u003Ccode>tabindex\u003C\u002Fcode>",[2248,2249,2250,2251],{"label":1129,"html":2246},{"label":1130,"html":1188},{"label":1131,"html":1149},{"label":1143,"html":2252},"Forwarded to the input.",{"summary":2254,"detail":2257},[2255,2256,1149],"\u003Ccode>onFocus\u003C\u002Fcode>","\u003Ccode>(event: FocusEvent) => void\u003C\u002Fcode>",[2258,2259,2260,2261],{"label":1129,"html":2255},{"label":1130,"html":2256},{"label":1131,"html":1149},{"label":1143,"html":2262},"Focus handler forwarded to the input.",{"summary":2264,"detail":2266},[2265,2256,1149],"\u003Ccode>onBlur\u003C\u002Fcode>",[2267,2268,2269,2270],{"label":1129,"html":2265},{"label":1130,"html":2256},{"label":1131,"html":1149},{"label":1143,"html":2271},"Blur handler forwarded to the input.",{"summary":2273,"detail":2276},[2274,2275,1149],"\u003Ccode>onKeydown\u003C\u002Fcode>","\u003Ccode>(event: KeyboardEvent) => void\u003C\u002Fcode>",[2277,2278,2279,2280],{"label":1129,"html":2274},{"label":1130,"html":2275},{"label":1131,"html":1149},{"label":1143,"html":2281},"Keydown handler forwarded to the input, run before the slider's own handling.",{"summary":2283,"detail":2284},[1356,1357,1149],[2285,2286,2287,2288],{"label":1129,"html":1356},{"label":1130,"html":1357},{"label":1131,"html":1149},{"label":1143,"html":2289},"Thumb content; receives the slider state.",[1126,2291,2292,2300],{},[1367,2293,2294],{},[1370,2295,2296,2298],{},[1373,2297,1376],{"style":1375},[1373,2299,1143],{"style":1375},[1380,2301,2302,2316,2324,2332,2340,2350,2360,2370,2380],{},[1370,2303,2304,2309],{},[1385,2305,2306],{"style":1375},[32,2307,2308],{},"data-index",[1385,2310,2311,2312,2315],{"style":1375},"The thumb's index in the values array (",[32,2313,2314],{},"0"," on single-thumb sliders).",[1370,2317,2318,2322],{},[1385,2319,2320],{"style":1375},[32,2321,1389],{},[1385,2323,1392],{"style":1375},[1370,2325,2326,2330],{},[1385,2327,2328],{"style":1375},[32,2329,1399],{},[1385,2331,1402],{"style":1375},[1370,2333,2334,2338],{},[1385,2335,2336],{"style":1375},[32,2337,1409],{},[1385,2339,1412],{"style":1375},[1370,2341,2342,2346],{},[1385,2343,2344],{"style":1375},[32,2345,1419],{},[1385,2347,1422,2348,1425],{"style":1375},[32,2349,950],{},[1370,2351,2352,2356],{},[1385,2353,2354],{"style":1375},[32,2355,1432],{},[1385,2357,1435,2358,1425],{"style":1375},[32,2359,950],{},[1370,2361,2362,2366],{},[1385,2363,2364],{"style":1375},[32,2365,1444],{},[1385,2367,1447,2368,1425],{"style":1375},[32,2369,950],{},[1370,2371,2372,2376],{},[1385,2373,2374],{"style":1375},[32,2375,1456],{},[1385,2377,1459,2378,1425],{"style":1375},[32,2379,950],{},[1370,2381,2382,2386],{},[1385,2383,2384],{"style":1375},[32,2385,1468],{},[1385,2387,1471,2388,1425],{"style":1375},[32,2389,950],{},[13,2391,2392],{},[206,2393,2394],{},"Keyboard:",[1126,2396,2397,2407],{},[1367,2398,2399],{},[1370,2400,2401,2404],{},[1373,2402,2403],{"style":1375},"Key",[1373,2405,2406],{"style":1375},"Action",[1380,2408,2409,2426,2441,2454,2465,2476,2489],{},[1370,2410,2411,2420],{},[1385,2412,2413,2416,2417],{"style":1375},[32,2414,2415],{},"ArrowRight"," \u002F ",[32,2418,2419],{},"ArrowUp",[1385,2421,2422,2423,232],{"style":1375},"Increment by ",[32,2424,2425],{},"step",[1370,2427,2428,2436],{},[1385,2429,2430,2416,2433],{"style":1375},[32,2431,2432],{},"ArrowLeft",[32,2434,2435],{},"ArrowDown",[1385,2437,2438,2439,232],{"style":1375},"Decrement by ",[32,2440,2425],{},[1370,2442,2443,2448],{},[1385,2444,2445],{"style":1375},[32,2446,2447],{},"Shift + Arrow",[1385,2449,2450,2451,232],{"style":1375},"Increment\u002Fdecrement by ",[32,2452,2453],{},"largeStep",[1370,2455,2456,2461],{},[1385,2457,2458],{"style":1375},[32,2459,2460],{},"PageUp",[1385,2462,2422,2463,232],{"style":1375},[32,2464,2453],{},[1370,2466,2467,2472],{},[1385,2468,2469],{"style":1375},[32,2470,2471],{},"PageDown",[1385,2473,2438,2474,232],{"style":1375},[32,2475,2453],{},[1370,2477,2478,2483],{},[1385,2479,2480],{"style":1375},[32,2481,2482],{},"Home",[1385,2484,2485,2486,2488],{"style":1375},"Set to ",[32,2487,385],{}," (or to the neighbouring thumb's bound on range sliders).",[1370,2490,2491,2496],{},[1385,2492,2493],{"style":1375},[32,2494,2495],{},"End",[1385,2497,2485,2498,2488],{"style":1375},[32,2499,389],{},[13,2501,2502,284,2504,2506],{},[32,2503,2432],{},[32,2505,2415],{}," are swapped in right-to-left text direction.","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> setup\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> lang\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"ts\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { Slider } \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> '@shardsui\u002Fvue\u002Fslider'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">template\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Slider.Root\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> :value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"40\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"w-56\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"flex items-center justify-between\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Slider.Label\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"text-sm font-medium text-gray-900 select-none\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>Brightness<\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Slider.Label\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Slider.Value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"text-sm text-gray-600 select-none\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Slider.Control\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"flex w-full touch-none items-center py-3 select-none\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Slider.Track\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"h-1 w-full rounded-sm bg-gray-50 inset-ring inset-ring-gray-200\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">        <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Slider.Indicator\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"rounded-sm bg-gray-700\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">        <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Slider.Thumb\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">          class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"size-4 rounded-full bg-gray-50 outline-1 outline-gray-300 has-focus-visible:outline-2 has-focus-visible:outline-gray-950\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">        \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      <\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Slider.Track\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Slider.Control\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  <\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Slider.Root\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">template\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> setup\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> lang\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"ts\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { Slider } \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> '@shardsui\u002Fvue\u002Fslider'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">template\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Slider.Root\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> :value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"[40, 80]\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> :format\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"{ style: 'currency', currency: 'USD' }\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"w-56\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"flex items-center justify-between\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Slider.Label\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"text-sm font-medium text-gray-900 select-none\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>Price range<\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Slider.Label\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Slider.Value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"text-sm text-gray-600 select-none\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Slider.Control\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"flex w-full touch-none items-center py-3 select-none\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Slider.Track\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"h-1 w-full rounded-sm bg-gray-50 inset-ring inset-ring-gray-200\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">        <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Slider.Indicator\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"rounded-sm bg-gray-700\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">        <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Slider.Thumb\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">          :index\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"0\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">          aria-label\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"Minimum price\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">          class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"size-4 rounded-full bg-gray-50 outline-1 outline-gray-300 has-focus-visible:outline-2 has-focus-visible:outline-gray-950\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">        \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">        <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Slider.Thumb\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">          :index\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"1\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">          aria-label\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"Maximum price\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">          class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"size-4 rounded-full bg-gray-50 outline-1 outline-gray-300 has-focus-visible:outline-2 has-focus-visible:outline-gray-950\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">        \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      <\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Slider.Track\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Slider.Control\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  <\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Slider.Root\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">template\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> setup\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> lang\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"ts\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { Slider } \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> '@shardsui\u002Fvue\u002Fslider'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">template\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Slider.Root\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> thumb-alignment\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"edge\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> :value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"100\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"w-56\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Slider.Control\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"flex w-full touch-none items-center py-3 select-none\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Slider.Track\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"h-1 w-full rounded-sm bg-gray-50 inset-ring inset-ring-gray-200\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">        <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Slider.Indicator\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"rounded-sm bg-gray-700\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">        <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Slider.Thumb\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">          aria-label\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"Opacity\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">          class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"size-4 rounded-full bg-gray-50 outline-1 outline-gray-300 has-focus-visible:outline-2 has-focus-visible:outline-gray-950\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">        \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      <\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Slider.Track\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Slider.Control\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  <\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Slider.Root\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">template\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> setup\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> lang\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"ts\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { Slider } \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> '@shardsui\u002Fvue\u002Fslider'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">template\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Slider.Root\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> orientation\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"vertical\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> :value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"60\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Slider.Control\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"flex h-32 touch-none px-3 select-none\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Slider.Track\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"h-full w-1 rounded-sm bg-gray-50 inset-ring inset-ring-gray-200\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">        <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Slider.Indicator\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"rounded-sm bg-gray-700\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">        <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Slider.Thumb\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">          aria-label\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"Volume\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">          class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"size-4 rounded-full bg-gray-50 outline-1 outline-gray-300 has-focus-visible:outline-2 has-focus-visible:outline-gray-950\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">        \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      <\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Slider.Track\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Slider.Control\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  <\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Slider.Root\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">template\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",1789390077368]