Slider

"use client";

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

export default function SliderExample() {
  const [volume, setVolume] = useState([40]);
  const [budget, setBudget] = useState([20, 80]);
  return (
    <div className="w-full max-w-sm space-y-8">
      <div className="space-y-4">
        <p className="text-sm">Volume: {volume[0]}%</p>
        <Slider
          aria-label="Volume"
          ref={(root) => {
            root
              ?.querySelector('[role="slider"]')
              ?.setAttribute("aria-label", "Volume");
          }}
          value={volume}
          onValueChange={setVolume}
          min={0}
          max={100}
          step={1}
        />
      </div>
      <div className="space-y-4">
        <p className="text-sm">Budget: {budget.join(" – ")}</p>
        <Slider
          aria-label="Budget range"
          ref={(root) => {
            root
              ?.querySelectorAll('[role="slider"]')
              .forEach((thumb, index) =>
                thumb.setAttribute(
                  "aria-label",
                  index === 0 ? "Minimum budget" : "Maximum budget",
                ),
              );
          }}
          value={budget}
          onValueChange={setBudget}
          min={0}
          max={100}
          step={5}
        />
      </div>
      <Slider
        aria-label="Disabled slider"
        ref={(root) => {
          root
            ?.querySelector('[role="slider"]')
            ?.setAttribute("aria-label", "Disabled volume");
        }}
        disabled
        defaultValue={[50]}
      />
    </div>
  );
}