Slider

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

export default function Basic() {
  return <Slider defaultValue={[22]} max={100} step={1} />;
}

"use client";

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

export default function WithText() {
  const [value, setValue] = useState([30]);

  return (
    <div className="flex w-full gap-4 text-sm font-medium">
      <Slider
        max={100}
        step={10}
        defaultValue={value}
        onValueChange={(value) => {
          setValue(value);
        }}
      />
      <p>{value}</p>
    </div>
  );
}

import { Slider } from "@/components/ui/slider";
import { VolumeHigh, VolumeX } from "@mynaui/icons-react";

export default function WithIcons() {
  return (
    <div className="flex w-full gap-4 font-medium">
      <VolumeX className="size-5 shrink-0 text-muted-foreground" />
      <Slider defaultValue={[80]} max={100} />
      <VolumeHigh className="size-5 shrink-0 text-muted-foreground" />
    </div>
  );
}