Slider

import { Slider } from "@compa11y/react";

import { useState } from "react";
import { Slider, Text } from "@compa11y/react";

// Single value
function VolumeSlider() {
  const [volume, setVolume] = useState(50);

  return (
    <div>
      <Text as="label" size="sm" weight="semibold">Volume: {volume}%</Text>
      <Slider
        value={volume}
        onValueChange={setVolume}
        aria-label="Volume"
      />
    </div>
  );
}

// Range slider
function PriceFilter() {
  const [range, setRange] = useState([20, 80]);

  return (
    <div>
      <Text as="label" size="sm" weight="semibold">
        Price: ${range[0]} – ${range[1]}
      </Text>
      <Slider
        value={range}
        onValueChange={setRange}
        min={0}
        max={200}
        step={5}
        aria-label={["Minimum price", "Maximum price"]}
      />
    </div>
  );
}