"use client";
import * as React from "react";
import { SpeakerLowIcon, SpeakerHighIcon } from "@phosphor-icons/react";
import { Label } from "@/components/ui/label";
import { Slider } from "@/components/ui/slider";

export default function SliderDemo() {
  const [v, setV] = React.useState([62]);
  return (
    <div className="grid w-full max-w-sm gap-7">
      <div className="grid gap-3">
        <div className="flex justify-between">
          <Label>Kuorum</Label>
          <span className="font-mono text-sm font-bold">{v[0]}%</span>
        </div>
        <Slider value={v} onValueChange={setV} aria-label="Kuorum" />
      </div>
      <div className="grid gap-3">
        <Label>Anggaran (range)</Label>
        <Slider defaultValue={[20, 75]} step={5} aria-label="Anggaran" />
      </div>
      <div className="grid gap-3">
        <Label>Volume interupsi</Label>
        <div className="flex items-center gap-3 text-on-surface-muted">
          <SpeakerLowIcon weight="bold" className="size-5 shrink-0" />
          <Slider defaultValue={[40]} aria-label="Volume interupsi" />
          <SpeakerHighIcon weight="bold" className="size-5 shrink-0" />
        </div>
      </div>
    </div>
  );
}
Installation
