Yami

Slider

An input where the user selects a value from a range.

Installation

Add the slider component with the shadcn CLI.

npx shadcn@latest add https://yami.ui.unsanity.ai/r/slider.json

Usage

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

<div className="w-64">
  <Slider defaultValue={[50]} max={100} step={1} />
</div>

Examples

Default

Code

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

<div className="w-64">
  <Slider defaultValue={[50]} max={100} step={1} />
</div>