Slider Component

Variants

Default Slider30

Success Slider60

Warning Slider80

Error Slider45

0100

Different Ranges

Range 0-10030

Range 0-10 (integers)6

Usage Examples

Basic Slider

"use client";

import { useState } from "react";
import { Slider } from "@/components/slider";

export default function BasicSlider() {
  const [value, setValue] = useState(50);

  return (
    <Slider
      value={value}
      onChange={setValue}
    />
  );
}

Slider with Label and Value Display

<Slider
  value={value}
  onChange={setValue}
  label="Volume"
  showValue
/>

Slider with Different Variants

<Slider value={value} onChange={setValue} variant="default" label="Default" />
<Slider value={value} onChange={setValue} variant="success" label="Success" />
<Slider value={value} onChange={setValue} variant="warning" label="Warning" />
<Slider value={value} onChange={setValue} variant="error" label="Error" />

Slider with Custom Range and Step

<Slider
  value={value}
  onChange={setValue}
  min={0}
  max={10}
  step={1}
  label="Rating"
  showValue
/>