)} {Array.from({ length: values.length }, (_, index) => ( {showValue && (

{values[index]}

)} ))} ); } export { Slider }; `,__src__:"registry/default/ui/slider.tsx",__style__:"default",children:(0,s.jsxs)(i.code,{"data-language":"tsx","data-line-numbers":"",children:[(0,s.jsxs)(i.span,{className:"line","data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},children:'"use client"'}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:";"})]}),` `,(0,s.jsx)(i.span,{className:"line","data-line":"",children:" "}),` `,(0,s.jsxs)(i.span,{className:"line","data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"import"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" { Slider "}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"as"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" SliderPrimitive } "}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"from"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},children:' "@base-ui/react/slider"'}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:";"})]}),` `,(0,s.jsxs)(i.span,{className:"line","data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"import"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" type"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:" *"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" as"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" React "}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"from"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},children:' "react"'}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:";"})]}),` `,(0,s.jsxs)(i.span,{className:"line","data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"import"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" { useMemo } "}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"from"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},children:' "react"'}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:";"})]}),` `,(0,s.jsx)(i.span,{className:"line","data-line":"",children:" "}),` `,(0,s.jsxs)(i.span,{className:"line","data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"import"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" { cn } "}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"from"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},children:' "@/lib/utils"'}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:";"})]}),` `,(0,s.jsx)(i.span,{className:"line","data-line":"",children:" "}),` `,(0,s.jsxs)(i.span,{className:"line","data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"type"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" SliderProps"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" ="}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" Omit"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"<"})]}),` `,(0,s.jsxs)(i.span,{className:"line","data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" React"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"."}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:"ComponentProps"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"<"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"typeof"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" SliderPrimitive.Root>,"})]}),` `,(0,s.jsxs)(i.span,{className:"line","data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},children:' "defaultValue"'}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" |"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},children:' "onValueChange"'}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" |"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},children:' "value"'})]}),` `,(0,s.jsxs)(i.span,{className:"line","data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"> "}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"&"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" {"})]}),` `,(0,s.jsxs)(i.span,{className:"line","data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},children:" value"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"?:"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:" number"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"[];"})]}),` `,(0,s.jsxs)(i.span,{className:"line","data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},children:" defaultValue"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"?:"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:" number"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"[];"})]}),` `,(0,s.jsxs)(i.span,{className:"line","data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" onValueChange"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"?:"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" ("}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},children:"value"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:":"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:" number"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"[]) "}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"=>"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:" void"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:";"})]}),` `,(0,s.jsxs)(i.span,{className:"line","data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},children:" showValue"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"?:"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:" boolean"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:";"})]}),` `,(0,s.jsxs)(i.span,{className:"line","data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},children:" showOrigin"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"?:"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:" boolean"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:";"})]}),` `,(0,s.jsx)(i.span,{className:"line","data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"};"})}),` `,(0,s.jsx)(i.span,{className:"line","data-line":"",children:" "}),` `,(0,s.jsxs)(i.span,{className:"line","data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"function"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" Slider"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"({"})]}),` `,(0,s.jsxs)(i.span,{className:"line","data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},children:" className"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:","})]}),` `,(0,s.jsxs)(i.span,{className:"line","data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},children:" defaultValue"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:","})]}),` `,(0,s.jsxs)(i.span,{className:"line","data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},children:" onValueChange"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:","})]}),` `,(0,s.jsxs)(i.span,{className:"line","data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},children:" value"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:","})]}),` `,(0,s.jsxs)(i.span,{className:"line","data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},children:" min"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" ="}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:" 0"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:","})]}),` `,(0,s.jsxs)(i.span,{className:"line","data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},children:" max"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" ="}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:" 100"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:","})]}),` `,(0,s.jsxs)(i.span,{className:"line","data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},children:" showOrigin"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:","})]}),` `,(0,s.jsxs)(i.span,{className:"line","data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},children:" showValue"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:","})]}),` `,(0,s.jsxs)(i.span,{className:"line","data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" ..."}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},children:"props"})]}),` `,(0,s.jsxs)(i.span,{className:"line","data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"}"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:":"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" SliderProps"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:") {"})]}),` `,(0,s.jsxs)(i.span,{className:"line","data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" const"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:" values"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" ="}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" useMemo"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"("})]}),` `,(0,s.jsxs)(i.span,{className:"line","data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" () "}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"=>"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" (Array."}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:"isArray"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"(value) "}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"?"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" value "}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:":"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" Array."}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:"isArray"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"(defaultValue) "}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"?"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" defaultValue "}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:":"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" [min, max]),"})]}),` `,(0,s.jsx)(i.span,{className:"line","data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" [value, defaultValue, min, max],"})}),` `,(0,s.jsx)(i.span,{className:"line","data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" );"})}),` `,(0,s.jsx)(i.span,{className:"line","data-line":"",children:" "}),` `,(0,s.jsxs)(i.span,{className:"line","data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:" return"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" ("})]}),` `,(0,s.jsxs)(i.span,{className:"line","data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" <"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:"SliderPrimitive.Root"})]}),` `,(0,s.jsxs)(i.span,{className:"line","data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" className"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"="}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"{"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:"cn"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"("})]}),` `,(0,s.jsxs)(i.span,{className:"line","data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},children:' "data-[orientation=vertical]:h-full data-[orientation=horizontal]:w-full"'}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:","})]}),` `,(0,s.jsx)(i.span,{className:"line","data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" className,"})}),` `,(0,s.jsx)(i.span,{className:"line","data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" )}"})}),` `,(0,s.jsxs)(i.span,{className:"line","data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" data-slot"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"="}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},children:'"slider"'})]}),` `,(0,s.jsxs)(i.span,{className:"line","data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" defaultValue"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"="}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"{defaultValue}"})]}),` `,(0,s.jsxs)(i.span,{className:"line","data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" max"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"="}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"{max}"})]}),` `,(0,s.jsxs)(i.span,{className:"line","data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" min"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"="}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"{min}"})]}),` `,(0,s.jsxs)(i.span,{className:"line","data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" onValueChange"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"="}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"{("}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},children:"nextValue"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:") "}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"=>"})]}),` `,(0,s.jsxs)(i.span,{className:"line","data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" onValueChange"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"?.(Array."}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:"isArray"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"(nextValue) "}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"?"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" ["}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"..."}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"nextValue] "}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:":"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" [nextValue])"})]}),` `,(0,s.jsx)(i.span,{className:"line","data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" }"})}),` `,(0,s.jsxs)(i.span,{className:"line","data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" value"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"="}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"{value}"})]}),` `,(0,s.jsxs)(i.span,{className:"line","data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" {"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"..."}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"props}"})]}),` `,(0,s.jsx)(i.span,{className:"line","data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" >"})}),` `,(0,s.jsxs)(i.span,{className:"line","data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" <"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:"SliderPrimitive.Control"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" className"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"="}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},children:'"relative flex h-[var(--field-height)] w-full cursor-grab touch-none select-none items-center data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col data-[disabled]:opacity-50"'}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:">"})]}),` `,(0,s.jsxs)(i.span,{className:"line","data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" <"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:"SliderPrimitive.Track"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" className"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"="}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},children:'"relative h-[12px] w-full grow overflow-hidden rounded-full bg-muted"'}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:">"})]}),` `,(0,s.jsxs)(i.span,{className:"line","data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" <"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:"SliderPrimitive.Indicator"})]}),` `,(0,s.jsxs)(i.span,{className:"line","data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" className"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"="}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},children:'"absolute h-full bg-primary"'})]}),` `,(0,s.jsxs)(i.span,{className:"line","data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" data-slot"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"="}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},children:'"slider-range"'})]}),` `,(0,s.jsx)(i.span,{className:"line","data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" />"})}),` `,(0,s.jsxs)(i.span,{className:"line","data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" {showOrigin "}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"&&"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" ("})]}),` `,(0,s.jsxs)(i.span,{className:"line","data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" <"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#85E89D","--shiki-light":"#22863A"},children:"div"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" className"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"="}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},children:'"pointer-events-none absolute top-1/2 left-1/2 h-[12px] w-[2px] -translate-x-1/2 -translate-y-1/2 bg-foreground/30"'}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" />"})]}),` `,(0,s.jsx)(i.span,{className:"line","data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" )}"})}),` `,(0,s.jsxs)(i.span,{className:"line","data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" "})]}),` `,(0,s.jsxs)(i.span,{className:"line","data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" {Array."}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:"from"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"({ length: values."}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:"length"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" }, ("}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},children:"_"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:", "}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#FFAB70","--shiki-light":"#E36209"},children:"index"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:") "}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"=>"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" ("})]}),` `,(0,s.jsxs)(i.span,{className:"line","data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" <"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:"SliderPrimitive.Thumb"})]}),` `,(0,s.jsxs)(i.span,{className:"line","data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" className"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"="}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},children:'"block size-[28px] rounded-full border-[0.5px] border-border bg-white shadow-lg ring-offset-background transition-colors hover:border-input-hover focus:border-ring focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"'})]}),` `,(0,s.jsxs)(i.span,{className:"line","data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" data-slot"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"="}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},children:'"slider-thumb"'})]}),` `,(0,s.jsxs)(i.span,{className:"line","data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" key"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"="}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"{index}"})]}),` `,(0,s.jsx)(i.span,{className:"line","data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" >"})}),` `,(0,s.jsxs)(i.span,{className:"line","data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" {showValue "}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"&&"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" ("})]}),` `,(0,s.jsxs)(i.span,{className:"line","data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" <"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#85E89D","--shiki-light":"#22863A"},children:"div"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" className"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"="}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},children:'"absolute top-[36px] left-1/2 h-[32px] w-fit -translate-x-1/2 text-center text-foreground text-xs"'}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:">"})]}),` `,(0,s.jsx)(i.span,{className:"line","data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" {values[index]}"})}),` `,(0,s.jsxs)(i.span,{className:"line","data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" "})]}),` `,(0,s.jsx)(i.span,{className:"line","data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" )}"})}),` `,(0,s.jsxs)(i.span,{className:"line","data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" "})]}),` `,(0,s.jsx)(i.span,{className:"line","data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" ))}"})}),` `,(0,s.jsxs)(i.span,{className:"line","data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" "})]}),` `,(0,s.jsxs)(i.span,{className:"line","data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" "})]}),` `,(0,s.jsx)(i.span,{className:"line","data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" );"})}),` `,(0,s.jsx)(i.span,{className:"line","data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"}"})}),` `,(0,s.jsx)(i.span,{className:"line","data-line":"",children:" "}),` `,(0,s.jsxs)(i.span,{className:"line","data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"export"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" { Slider };"})]})]})})})}),(0,s.jsx)(t,{children:"Update the import paths to match your project setup."})]})})]}),` `,(0,s.jsxs)(i.h2,{id:"usage",children:[(0,s.jsx)(i.a,{"aria-label":"Link to section",className:"subheading-anchor",href:"#usage",children:(0,s.jsx)(i.span,{className:"icon icon-link"})}),"Usage"]}),` `,(0,s.jsx)(i.figure,{"data-rehype-pretty-code-figure":"",children:(0,s.jsx)(i.pre,{tabIndex:"0","data-language":"tsx","data-theme":"github-dark github-light",__rawString__:`import { Slider } from "@/components/ui/slider"; `,children:(0,s.jsx)(i.code,{"data-language":"tsx","data-line-numbers":"",children:(0,s.jsxs)(i.span,{className:"line","data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"import"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:" { Slider } "}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"from"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#9ECBFF","--shiki-light":"#032F62"},children:' "@/components/ui/slider"'}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:";"})]})})})}),` `,(0,s.jsx)(i.figure,{"data-rehype-pretty-code-figure":"",children:(0,s.jsx)(i.pre,{tabIndex:"0","data-language":"tsx","data-theme":"github-dark github-light",__rawString__:` `,children:(0,s.jsx)(i.code,{"data-language":"tsx","data-line-numbers":"",children:(0,s.jsxs)(i.span,{className:"line","data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"<"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:"Slider"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:" defaultValue"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"="}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"{["}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:"33"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"]} "}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:"max"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"="}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"{"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:"100"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"} "}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#B392F0","--shiki-light":"#6F42C1"},children:"step"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#F97583","--shiki-light":"#D73A49"},children:"="}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"{"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#79B8FF","--shiki-light":"#005CC5"},children:"1"}),(0,s.jsx)(i.span,{style:{"--shiki-dark":"#E1E4E8","--shiki-light":"#24292E"},children:"} />"})]})})})})]})}function F(l={}){let{wrapper:i}=l.components||{};return i?(0,s.jsx)(i,{...l,children:(0,s.jsx)(o,{...l})}):o(l)}function n(l,i){throw new Error("Expected "+(i?"component":"object")+" `"+l+"` to be defined: you likely forgot to import, pass, or provide it.")}return x(v);})(); ;return Component;

Slider

Installation

Usage