Baukasten

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

// One value is a slider, two a range, three or more a multi-range.
const [price, setPrice] = useState([100, 300]);

<Slider
  min={0}
  max={500}
  step={10}
  values={price}
  onValuesChange={setPrice}
  thumbLabels={["Minimum price", "Maximum price"]}
  formatValue={(value) => value + " EUR"}
/>

// Uncontrolled: <Slider defaultValues={[30]} aria-label="Volume" />

import {
  Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
} from "@repo/ui/components/select";

const fruits = [
  { value: "apple", label: "Apple" },
  { value: "pear", label: "Pear" },
];

<Select items={fruits} defaultValue="apple">
  <SelectTrigger aria-label="Fruit">
    <SelectValue />
  </SelectTrigger>
  <SelectContent>
    {fruits.map((fruit) => (
      <SelectItem key={fruit.value} value={fruit.value}>
        {fruit.label}
      </SelectItem>
    ))}
  </SelectContent>
</Select>