Slider

Slider is a component component that provides slider functionality.

Active

Installation

npm install @your-design-system/slider

import { Slider } from "@/components/ui/slider"

export function SliderDemo() {
  return (
    <Slider>
      {/* Content */}
    </Slider>
  )
}

Prop	Type	Default	Description
`value`	`number`	-	The value prop for the component.
`min`	`number`	`0`	The min prop for the component.
`max`	`number`	`100`	The max prop for the component.
`step`	`number`	`1`	The step prop for the component.

The component uses Tailwind CSS classes for styling. You can customize the appearance by overriding these classes.

relativeflexw-fulltouch-noneselect-noneitems-center

This component is validated against atomic design principles and foundation token usage.

✓ Atomic Design Compliant

This component follows atomic design principles and properly uses foundation tokens.

On This Page