); } `,"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"tsx","data-theme":"dracula-soft",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"dracula-soft",style:{display:"grid"},children:[(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" { Slider } "}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,e.jsx)(l.span,{style:{color:"#E7EE98"},children:"@/components/retroui/Slider"}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:" default"}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:" function"}),(0,e.jsx)(l.span,{style:{color:"#62E884"},children:" SliderDefault"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:"() {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#E7EE98"},children:"w-[400px]"}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Slider"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" defaultValue"}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:"{["}),(0,e.jsx)(l.span,{style:{color:"#BF9EEE"},children:"50"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:"]}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" min"}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#BF9EEE"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" max"}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#BF9EEE"},children:"100"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" step"}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#BF9EEE"},children:"1"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" aria-label"}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#E7EE98"},children:"Slider Control"}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:'"'})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" />"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" );"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:"}"})})]})})})}),` `,(0,e.jsx)("br",{}),` `,(0,e.jsx)("br",{}),` `,(0,e.jsx)(l.h2,{id:"installation",children:"Installation"}),` `,(0,e.jsxs)(o,{children:[(0,e.jsx)(o.Cli,{npmCommand:"npx shadcn@latest add 'https://retroui.dev/r/slider.json'"}),(0,e.jsxs)(o.Manual,{children:[(0,e.jsx)(l.h4,{id:"1-install-dependencies",children:"1. Install dependencies:"}),(0,e.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"sh","data-theme":"dracula-soft",children:(0,e.jsx)(l.code,{"data-language":"sh","data-theme":"dracula-soft",style:{display:"grid"},children:(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#62E884"},children:"npm"}),(0,e.jsx)(l.span,{style:{color:"#E7EE98"},children:" install"}),(0,e.jsx)(l.span,{style:{color:"#E7EE98"},children:" @radix-ui/react-slider"})]})})})}),(0,e.jsx)("br",{}),(0,e.jsx)(l.h4,{id:"2-copy-the-code--into-your-project",children:"2. Copy the code \u{1F447} into your project:"}),(0,e.jsx)(c,{name:"slider",children:(0,e.jsx)(l.figure,{__src__:"/vercel/path0/components/retroui/Slider.tsx","data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"tsx","data-theme":"dracula-soft",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"dracula-soft",style:{display:"grid"},children:[(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#E7EE98"},children:"use client"}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#BF9EEE"},children:" *"}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:" as"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" React "}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,e.jsx)(l.span,{style:{color:"#E7EE98"},children:"react"}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#BF9EEE"},children:" *"}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:" as"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" SliderPrimitive "}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,e.jsx)(l.span,{style:{color:"#E7EE98"},children:"@radix-ui/react-slider"}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" { cn } "}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,e.jsx)(l.span,{style:{color:"#E7EE98"},children:"@/lib/utils"}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" Slider "}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" React.forwardRef"}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"<"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" React.ElementRef"}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:""}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" React.ComponentPropsWithoutRef"}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:""})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:"(({ "}),(0,e.jsx)(l.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" }, "}),(0,e.jsx)(l.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"SliderPrimitive.Root"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" ref"}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:"{ref}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#62E884"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:"("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:' "'}),(0,e.jsx)(l.span,{style:{color:"#E7EE98"},children:"relative flex w-full touch-none select-none items-center"}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" className,"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" )}"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:"props}"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" >"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"SliderPrimitive.Track"}),(0,e.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#E7EE98"},children:"relative h-3 w-full grow overflow-hidden bg-background border-2"}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"SliderPrimitive.Range"}),(0,e.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#E7EE98"},children:"absolute h-full bg-primary"}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"SliderPrimitive.Thumb"}),(0,e.jsx)(l.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#E7EE98"},children:"block h-4.5 w-4.5 border-2 bg-background shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"}),(0,e.jsx)(l.span,{style:{color:"#DEE492"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:"));"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:"Slider.displayName "}),(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" SliderPrimitive.Root.displayName;"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F286C4"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#F6F6F4"},children:" { Slider };"})]})]})})})})]})]}),` `,(0,e.jsx)("br",{}),` `,(0,e.jsx)("br",{}),` `,(0,e.jsx)(l.h2,{id:"examples",children:"Examples"}),` `,(0,e.jsx)(l.h3,{id:"default",children:"Default"}),` `,(0,e.jsx)(r,{name:"slider-style-default",children:(0,e.jsx)(l.figure,{__src__:"preview/components/slider-style-default.tsx",__rawString__:`import { Slider } from "@/components/retroui/Slider"; export default function SliderDefault() { return (