Slider

"use client";

import { useState } from "react";
import { Slider, Text, VStack } from "astralis-ui";

export function SliderDemo() {
  const [volume, setVolume] = useState(40);

  return (
    <VStack gap="3" alignItems="stretch" w="full" maxW="xs">
      <Slider value={volume} onChange={setVolume} />
      <Text size="xs" color="muted">Volume: {volume}%</Text>
    </VStack>
  );
}

"use client";

import { Slider, Box } from "astralis-ui";

export function SliderMarks() {
  return (
    <Box w="full" maxW="xs" pb="4">
      <Slider
        min={0}
        max={100}
        step={25}
        defaultValue={50}
        colorScheme="purple"
        marks={[
          { value: 0, label: "Off" },
          { value: 25 },
          { value: 50, label: "Balanced" },
          { value: 75 },
          { value: 100, label: "Max" },
        ]}
      />
    </Box>
  );
}

"use client";

import { useState } from "react";
import { RangeSlider, Text, VStack } from "astralis-ui";

export function SliderRange() {
  const [range, setRange] = useState<[number, number]>([200, 600]);

  return (
    <VStack gap="3" alignItems="stretch" w="full" maxW="xs">
      <RangeSlider min={0} max={1000} step={50} value={range} onChange={setRange} />
      <Text size="xs" color="muted">
        Price: ${range[0]} – ${range[1]}
      </Text>
    </VStack>
  );
}