Slider

TS

import { … } from "@fungi.computer/caps/components/slider";

Hero

TSX

import { Slider } from "@fungi.computer/caps/components/slider";

export default function Hero() {
  return (
    <Slider className="w-full max-w-sm" defaultValue={60} tone="primary" />
  );
}

Sizes and tones

TSX

import { Slider } from "@fungi.computer/caps/components/slider";

export default function SizesAndTones() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-3">
      <Slider defaultValue={30} size="xs" tone="neutral" />
      <Slider defaultValue={50} size="sm" tone="accent" />
      <Slider defaultValue={70} size="lg" tone="success" />
    </div>
  );
}

Interactive

TSX

import { useState } from "react";
import { Slider } from "@fungi.computer/caps/components/slider";

export default function Interactive() {
  const [radius, setRadius] = useState(5);
  return (
    <div className="flex w-full max-w-sm flex-col gap-2">
      <Slider
        max={20}
        min={1}
        onChange={(event) => {
          setRadius(Number(event.target.value));
        }}
        value={radius}
      />
      <p className="text-xs text-base-content">Search radius: {radius} mi</p>
    </div>
  );
}

Props

SliderProps

Prop	Type	Description
size?	"xs" | "sm" | "default" | "lg"
tone?	"neutral" | "primary" | "secondary" | "accent" | "success" | "info" | "warning" | "error"

• size?"xs" | "sm" | "default" | "lg"
• tone?"neutral" | "primary" | "secondary" | "accent" | "success" | "info" | "warning" | "error"

Full types: API reference.