# Slider shadcn slider with a dithered range. Source: https://www.ui95.dev/components/slider ## Examples ```tsx import { Slider } from "@/components/ui/slider" import type { ShowcaseDemo } from "../types" export const demo: ShowcaseDemo = { span: "tall", variants: [ { label: "empty", render: () => }, { label: "half", render: () => }, { label: "full", render: () => }, { label: "range", render: () => }, { label: "step 25", render: () => , }, { label: "disabled", render: () => , }, { label: "vertical", render: () => ( ), }, ], } ``` ## Installation ```bash npx shadcn@latest add https://www.ui95.dev/r/slider.json ``` Run it in a Radix shadcn project that already has the UI95 theme. Dependencies: ```bash npm install cn radix-ui ``` `components/ui/slider.tsx` ```tsx "use client" import { cn } from "cn" import { Slider as SliderPrimitive } from "radix-ui" import * as React from "react" function Slider({ className, defaultValue, value, min = 0, max = 100, ...props }: React.ComponentProps) { const thumbValues = React.useMemo( () => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max], [value, defaultValue, min, max] ) return ( {Array.from({ length: thumbValues.length }, (_, index) => ( ))} ) } export { Slider } ``` ## API reference ### Slider No props of its own. It forwards the props of the element or primitive it wraps. ## Sounds - `slider.tick`