Slider

Value & range picker. 2 types × 4 states.

Budget: ৳480

tsx

import * as React from "react";
import { Slider } from "@/components/ui/slider";

export default function Example() {
  const [v, setV] = React.useState(480);
  return (
    <div style={{ width: 320, display: "grid", gap: 8 }}>
      <label htmlFor="budget" className="text-label-medium text-fg-primary">Budget: ৳{v}</label>
      <Slider id="budget" min={100} max={1000} step={10} value={v} onChange={e => setV(Number(e.target.value))} />
    </div>
  );
}

Installation

$ npx uix-ui@latest add slider

This copies the file into components/ui/slider.tsx in your project. npx shadcn@latest add @uix/slider works too.

Usage

slider.tsx

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

<div style={{ width: 320, display: "grid", gap: 20 }}>
  <Slider aria-label="Sweetness" defaultValue={30} />
  <Slider aria-label="Strength" defaultValue={80} />
  <Slider aria-label="Locked" defaultValue={50} disabled />
</div>

Examples

Values and disabled

tsx

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

export default function Example() {
  return (
    <div style={{ width: 320, display: "grid", gap: 20 }}>
      <Slider aria-label="Sweetness" defaultValue={30} />
      <Slider aria-label="Strength" defaultValue={80} />
      <Slider aria-label="Locked" defaultValue={50} disabled />
    </div>
  );
}

Props

Prop	Type	Default
`value`	`number`	–
`defaultValue`	`number`	–
`onChange`	`(event: React.ChangeEvent<HTMLInputElement>) => void`	–

Everything else is passed to the root element, so className, aria-* and event handlers work as usual.

Dependencies

Installed for you by the CLI.

class-variance-authority
clsx
tailwind-merge

lib/utils.ts

Getting started

Actions

Forms

Navigation

Feedback

Data display

Overlays

#Installation

#Usage

#Examples

#Values and disabled

#Props

#Dependencies