Slider

import { Slider } from "@/components/ui/slider";

export default function Particle() {
  return <Slider defaultValue={50} />;
}

import { Label } from "@/components/ui/label";
import { Slider, SliderValue } from "@/components/ui/slider";

export default function Particle() {
  return (
    <Slider defaultValue={50}>
      <div className="mb-2 flex items-center justify-between gap-1">
        <Label className="font-medium text-sm">Opacity</Label>
        <SliderValue />
      </div>
    </Slider>
  );
}

import { Slider } from "@/components/ui/slider";

export default function Particle() {
  return <Slider defaultValue={[25, 75]} />;
}

"use client";

import * as React from "react";

import { Button } from "@/components/ui/button";
import {
  Field,
  FieldDescription,
  FieldLabel,
} from "@/components/ui/field";
import { Form } from "@/components/ui/form";
import { Slider, SliderValue } from "@/components/ui/slider";

export default function Particle() {
  const [loading, setLoading] = React.useState<boolean>(false);
  const [value, setValue] = React.useState<number | readonly number[]>([
    25, 75,
  ]);

  const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const formData = new FormData(e.currentTarget);
    setLoading(true);
    await new Promise((r) => setTimeout(r, 800));
    setLoading(false);
    const volumes = formData.getAll("volume");
    alert(`Volume: ${volumes.join(", ")}`);
  };

  return (
    <Form onSubmit={onSubmit}>
      <Field className="items-stretch gap-3" name="volume">
        <Slider disabled={loading} onValueChange={setValue} value={value}>
          <div className="mb-2 flex items-center justify-between gap-1">
            <FieldLabel>Volume</FieldLabel>
            <SliderValue />
          </div>
        </Slider>
        <FieldDescription>Choose a value between 0 and 100</FieldDescription>
      </Field>
      <Button disabled={loading} type="submit">
        Submit
      </Button>
    </Form>
  );
}