value} value={values} onValueChange={setValues} min={0} max={100} step={1} />

); }; export DualRangeSliderDemo; `,__src__:"src/registry/default/example/extra-new/dual-range-slider/dual-range-slider-demo.tsx","data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{style:{backgroundColor:"#22272e",color:"#adbac7"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark-dimmed",__rawString__:`"use client"; import React, { useState } from "react"; import { DualRangeSlider } from "@/components/ui/extension/dual-range-slider"; const DualRangeSliderDemo = () => { const [values, setValues] = useState([0, 100]); return (

value} value={values} onValueChange={setValues} min={0} max={100} step={1} />

); }; export DualRangeSliderDemo; `,__src__:"src/registry/default/example/extra-new/dual-range-slider/dual-range-slider-demo.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"github-dark-dimmed",style:{display:"grid"},children:[(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:'"use client"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" React, { useState } "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:' "react"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" { DualRangeSlider } "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:' "@/components/ui/extension/dual-range-slider"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#DCBDFB"},children:" DualRangeSliderDemo"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" () "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"values"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"setValues"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"] "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#DCBDFB"},children:" useState"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"(["}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"100"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"]);"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8DDB8C"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:'"w-full px-10"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8DDB8C"},children:"DualRangeSlider"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" label"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#F69D50"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" value"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" value"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"values"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" onValueChange"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"setValues"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" min"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" max"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"100"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" step"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"1"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" />"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" );"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"};"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" DualRangeSliderDemo;"})]})]})})})}),` `,(0,e.jsx)(l.h2,{id:"installation",children:"Installation"}),` `,(0,e.jsxs)(p,{defaultValue:"cli",children:[(0,e.jsxs)(h,{children:[(0,e.jsx)(t,{value:"cli",children:"CLI"}),(0,e.jsx)(t,{value:"manual",children:"Manual"})]}),(0,e.jsx)(i,{value:"manual",children:(0,e.jsxs)(d,{children:[(0,e.jsx)(r,{children:"Install the package if you do not have it."}),(0,e.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{style:{backgroundColor:"#22272e",color:"#adbac7"},tabIndex:"0","data-language":"bash","data-theme":"github-dark-dimmed",__rawString__:`npm i @radix-ui/react-slider `,children:(0,e.jsx)(l.code,{"data-language":"bash","data-theme":"github-dark-dimmed",style:{display:"grid"},children:(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F69D50"},children:"npm"}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:" i"}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:" @radix-ui/react-slider"})]})})})}),(0,e.jsx)(r,{children:"Copy and paste the following code into your project."}),(0,e.jsx)(o,{name:"dual-range-slider",children:(0,e.jsx)(l.figure,{"data-language":"tsx","data-theme":"default",__rawString__:`"use client"; import * as React from "react"; import * as SliderPrimitive from "@radix-ui/react-slider"; import { cn } from "@/lib/utils"; interface DualRangeSliderProps extends React.ComponentProps { labelPosition?: "top" | "bottom"; label?: (value: number | undefined) => React.ReactNode; } const DualRangeSlider = React.forwardRef< React.ElementRef, DualRangeSliderProps >(({ className, label, labelPosition = "top", ...props }, ref) => { const initialValue = Array.isArray(props.value) ? props.value : [props.min, props.max]; return ( {initialValue.map((value, index) => ( {label && ( {label(value)} )} ))} ); }); DualRangeSlider.displayName = "DualRangeSlider"; export { DualRangeSlider }; `,__src__:"src/registry/default/extension/dual-range-slider.tsx","data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{style:{backgroundColor:"#22272e",color:"#adbac7"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark-dimmed",__rawString__:`"use client"; import * as React from "react"; import * as SliderPrimitive from "@radix-ui/react-slider"; import { cn } from "@/lib/utils"; interface DualRangeSliderProps extends React.ComponentProps { labelPosition?: "top" | "bottom"; label?: (value: number | undefined) => React.ReactNode; } const DualRangeSlider = React.forwardRef< React.ElementRef, DualRangeSliderProps >(({ className, label, labelPosition = "top", ...props }, ref) => { const initialValue = Array.isArray(props.value) ? props.value : [props.min, props.max]; return ( {initialValue.map((value, index) => ( {label && ( {label(value)} )} ))} ); }); DualRangeSlider.displayName = "DualRangeSlider"; export { DualRangeSlider }; `,__src__:"src/registry/default/extension/dual-range-slider.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"github-dark-dimmed",style:{display:"grid"},children:[(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:'"use client"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" *"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" as"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" React "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:' "react"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" *"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" as"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" SliderPrimitive "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:' "@radix-ui/react-slider"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" { cn } "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:' "@/lib/utils"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"interface"}),(0,e.jsx)(l.span,{style:{color:"#F69D50"},children:" DualRangeSliderProps"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" extends"}),(0,e.jsx)(l.span,{style:{color:"#F69D50"},children:" React"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"ComponentProps"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"typeof"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" SliderPrimitive.Root> {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F69D50"},children:" labelPosition"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"?:"}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:' "top"'}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" |"}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:' "bottom"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#DCBDFB"},children:" label"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"?:"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#F69D50"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" number"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" |"}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" undefined"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#F69D50"},children:" React"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#F69D50"},children:"ReactNode"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"}"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" DualRangeSlider"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" React.forwardRef"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"<"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" React.ElementRef"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:""}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:","})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" DualRangeSliderProps"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"(({ "}),(0,e.jsx)(l.span,{style:{color:"#F69D50"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#F69D50"},children:"label"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#F69D50"},children:"labelPosition"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:' "top"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#F69D50"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" }, "}),(0,e.jsx)(l.span,{style:{color:"#F69D50"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" initialValue"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" Array."}),(0,e.jsx)(l.span,{style:{color:"#DCBDFB"},children:"isArray"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"(props.value)"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" ?"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" props.value"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" :"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" [props.min, props.max];"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8DDB8C"},children:"SliderPrimitive.Root"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" ref"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#DCBDFB"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:' "relative flex w-full touch-none select-none items-center"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:","})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" className,"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" )"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" {..."}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" >"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8DDB8C"},children:"SliderPrimitive.Track"}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:'"relative h-2 w-full grow overflow-hidden rounded-full bg-secondary"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8DDB8C"},children:"SliderPrimitive.Range"}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:'"absolute h-full bg-primary"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"initialValue."}),(0,e.jsx)(l.span,{style:{color:"#DCBDFB"},children:"map"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"(("}),(0,e.jsx)(l.span,{style:{color:"#F69D50"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#F69D50"},children:"index"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8DDB8C"},children:"React.Fragment"}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" key"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"index"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8DDB8C"},children:"SliderPrimitive.Thumb"}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:'"relative block h-4 w-4 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"label "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"&&"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8DDB8C"},children:"span"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#DCBDFB"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:' "absolute flex w-full justify-center"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:","})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" labelPosition "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:' "top"'}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" &&"}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:' "-top-7"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:","})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" labelPosition "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:' "bottom"'}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" &&"}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:' "top-4"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:","})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" )"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" >"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#DCBDFB"},children:"label"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"(value)"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" )"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" ))"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" );"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"});"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"DualRangeSlider.displayName "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:' "DualRangeSlider"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" { DualRangeSlider };"})]})]})})})}),(0,e.jsx)(r,{children:"Update the import paths to match your project setup."})]})}),(0,e.jsxs)(i,{value:"cli",children:[(0,e.jsx)(r,{children:"Run the following command "}),(0,e.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{style:{backgroundColor:"#22272e",color:"#adbac7"},tabIndex:"0","data-language":"bash","data-theme":"github-dark-dimmed",__rawString__:`npx @shadext/cli add dual-range-slider `,__npmCommand__:`npx @shadext/cli add dual-range-slider `,__yarnCommand__:`npx @shadext/cli add dual-range-slider `,__pnpmCommand__:`pnpm dlx @shadext/cli add dual-range-slider `,__bunCommand__:`bunx --bun @shadext/cli add dual-range-slider `,children:(0,e.jsx)(l.code,{"data-language":"bash","data-theme":"github-dark-dimmed",style:{display:"grid"},children:(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F69D50"},children:"npx"}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:" @shadext/cli"}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:" add"}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:" dual-range-slider"})]})})})})]})]}),` `,(0,e.jsx)(l.h2,{id:"example",children:"Example"}),` `,(0,e.jsx)(l.h3,{id:"custom-label",children:"Custom Label"}),` `,(0,e.jsx)(a,{name:"dual-range-slider-custom-label",children:(0,e.jsx)(l.figure,{"data-language":"tsx","data-theme":"default",__rawString__:`"use client"; import * as React from "react"; import { DualRangeSlider } from "@/components/ui/extension/dual-range-slider"; import { useState } from "react"; const DualRangeSliderCustomLabel = () => { const [values, setValues] = useState([0, 100]); return (

{value}\u2103} value={values} onValueChange={setValues} min={0} max={100} step={1} />

); }; export DualRangeSliderCustomLabel; `,__src__:"src/registry/default/example/extra-new/dual-range-slider/usage/dual-range-slider-custom-label.tsx","data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{style:{backgroundColor:"#22272e",color:"#adbac7"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark-dimmed",__rawString__:`"use client"; import * as React from "react"; import { DualRangeSlider } from "@/components/ui/extension/dual-range-slider"; import { useState } from "react"; const DualRangeSliderCustomLabel = () => { const [values, setValues] = useState([0, 100]); return (

{value}\u2103} value={values} onValueChange={setValues} min={0} max={100} step={1} />

); }; export DualRangeSliderCustomLabel; `,__src__:"src/registry/default/example/extra-new/dual-range-slider/usage/dual-range-slider-custom-label.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"github-dark-dimmed",style:{display:"grid"},children:[(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:'"use client"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" *"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" as"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" React "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:' "react"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" { DualRangeSlider } "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:' "@/components/ui/extension/dual-range-slider"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" { useState } "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:' "react"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#DCBDFB"},children:" DualRangeSliderCustomLabel"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" () "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"values"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"setValues"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"] "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#DCBDFB"},children:" useState"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"(["}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"100"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"]);"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8DDB8C"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:'"w-full space-y-5 px-10"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8DDB8C"},children:"DualRangeSlider"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" label"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#F69D50"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8DDB8C"},children:"span"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"\u2103"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" value"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"values"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" onValueChange"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"setValues"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" min"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" max"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"100"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" step"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"1"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" />"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" );"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"};"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" DualRangeSliderCustomLabel;"})]})]})})})}),` `,(0,e.jsx)(l.h3,{id:"label-position",children:"Label Position"}),` `,(0,e.jsx)(a,{name:"dual-range-slider-label-position",children:(0,e.jsx)(l.figure,{"data-language":"tsx","data-theme":"default",__rawString__:`"use client"; import * as React from "react"; import { DualRangeSlider } from "@/components/ui/extension/dual-range-slider"; import { useState } from "react"; const DualRangeSliderLabelPosition = () => { const [values, setValues] = useState([0, 100]); return (

TOP:

value} labelPosition="top" value={values} onValueChange={setValues} min={0} max={100} step={1} />

BOTTOM:

value} labelPosition="bottom" value={values} onValueChange={setValues} min={0} max={100} step={1} />

); }; export DualRangeSliderLabelPosition; `,__src__:"src/registry/default/example/extra-new/dual-range-slider/usage/dual-range-slider-label-position.tsx","data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{style:{backgroundColor:"#22272e",color:"#adbac7"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark-dimmed",__rawString__:`"use client"; import * as React from "react"; import { DualRangeSlider } from "@/components/ui/extension/dual-range-slider"; import { useState } from "react"; const DualRangeSliderLabelPosition = () => { const [values, setValues] = useState([0, 100]); return (

TOP:

value} labelPosition="top" value={values} onValueChange={setValues} min={0} max={100} step={1} />

BOTTOM:

value} labelPosition="bottom" value={values} onValueChange={setValues} min={0} max={100} step={1} />

); }; export DualRangeSliderLabelPosition; `,__src__:"src/registry/default/example/extra-new/dual-range-slider/usage/dual-range-slider-label-position.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"github-dark-dimmed",style:{display:"grid"},children:[(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:'"use client"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" *"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" as"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" React "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:' "react"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" { DualRangeSlider } "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:' "@/components/ui/extension/dual-range-slider"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" { useState } "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:' "react"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#DCBDFB"},children:" DualRangeSliderLabelPosition"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" () "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"values"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"setValues"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"] "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#DCBDFB"},children:" useState"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"(["}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"100"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"]);"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8DDB8C"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:'"w-full space-y-5 px-10"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8DDB8C"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:'"mb-8"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:">TOP:"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8DDB8C"},children:"DualRangeSlider"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" label"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#F69D50"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" value"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" labelPosition"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:'"top"'})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" value"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"values"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" onValueChange"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"setValues"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" min"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" max"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"100"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" step"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"1"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" />"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8DDB8C"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:">BOTTOM:"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8DDB8C"},children:"DualRangeSlider"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" label"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#F69D50"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" value"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" labelPosition"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:'"bottom"'})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" value"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"values"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" onValueChange"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"setValues"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" min"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" max"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"100"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" step"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"1"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" />"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" );"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"};"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" DualRangeSliderLabelPosition;"})]})]})})})}),` `,(0,e.jsx)(l.h3,{id:"single-slider",children:"Single Slider"}),` `,(0,e.jsx)(a,{name:"dual-range-slider-single",children:(0,e.jsx)(l.figure,{"data-language":"tsx","data-theme":"default",__rawString__:`"use client"; import * as React from "react"; import { DualRangeSlider } from "@/components/ui/extension/dual-range-slider"; import { useState } from "react"; const DualRangeSliderSingle = () => { const [values, setValues] = useState([10]); return (

With Label:

value} value={values} onValueChange={setValues} min={0} max={100} step={1} />

Without Label

); }; export DualRangeSliderSingle; `,__src__:"src/registry/default/example/extra-new/dual-range-slider/usage/dual-range-slider-single.tsx","data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{style:{backgroundColor:"#22272e",color:"#adbac7"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark-dimmed",__rawString__:`"use client"; import * as React from "react"; import { DualRangeSlider } from "@/components/ui/extension/dual-range-slider"; import { useState } from "react"; const DualRangeSliderSingle = () => { const [values, setValues] = useState([10]); return (

With Label:

value} value={values} onValueChange={setValues} min={0} max={100} step={1} />

Without Label

); }; export DualRangeSliderSingle; `,__src__:"src/registry/default/example/extra-new/dual-range-slider/usage/dual-range-slider-single.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"github-dark-dimmed",style:{display:"grid"},children:[(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:'"use client"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" *"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" as"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" React "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:' "react"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" { DualRangeSlider } "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:' "@/components/ui/extension/dual-range-slider"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" { useState } "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:' "react"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#DCBDFB"},children:" DualRangeSliderSingle"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" () "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"values"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"setValues"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"] "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#DCBDFB"},children:" useState"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"(["}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"10"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"]);"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8DDB8C"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#96D0FF"},children:'"w-full space-y-5 px-10"'}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8DDB8C"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:">With Label:"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8DDB8C"},children:"DualRangeSlider"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" label"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#F69D50"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" value"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" value"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"values"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" onValueChange"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"setValues"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" min"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" max"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"100"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" step"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"1"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" />"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8DDB8C"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:">Without Label"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#8DDB8C"},children:"DualRangeSlider"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" value"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"values"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" onValueChange"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"setValues"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" min"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" max"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"100"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:" step"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#6CB6FF"},children:"1"}),(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" />"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" );"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:"};"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#F47067"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#ADBAC7"},children:" DualRangeSliderSingle;"})]})]})})})})]})}function A(n={}){let{wrapper:l}=n.components||{};return l?(0,e.jsx)(l,{...n,children:(0,e.jsx)(D,{...n})}):D(n)}function s(n,l){throw new Error("Expected "+(l?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return S(R);})(); ;return Component;

Dual Range Slider

Installation

Run the following command

Example

Custom Label

Label Position

Single Slider

Table of Content

Github