Slider

"use client";

import Slider, { Stack, Text } from "@/components/ui/slider";
import { useState } from "react";

// The value drives other content as it changes.
export default function ControlledSliderDemo() {
  const [confidence, setConfidence] = useState(70);
  const note =
    confidence >= 85
      ? "Alpha sends only when it is very sure. Most drafts wait for review."
      : confidence >= 50
        ? "Alpha sends routine replies and holds the rest for review."
        : "Alpha sends most replies without review.";
  return (
    <Stack gap={12} style={{ width: 320 }}>
      <Slider
        label="Confidence threshold"
        value={confidence}
        onChange={setConfidence}
      />
      <Text size="sm" secondary>
        {note}
      </Text>
    </Stack>
  );
}