Schieberegler (Slider)

Schieberegler (Sliders) ermöglichen es Benutzern, einen Wert einzugeben, indem sie einen Griff entlang einer Spur verschieben. Diese Komponente ist hochgradig anpassbar mit verschiedenen Optionen für Ausrichtung, Schrittweite, Bereich und mehr.

Verwendung

Um den Slider zu verwenden, importieren Sie ihn aus Ihrer Komponentenbibliothek und konfigurieren Sie ihn mit Eigenschaften wie min, max, step, value und anderen.

Einfacher Schieberegler

Ein einfaches Beispiel der Slider-Komponente mit Standardeinstellungen.

import React, { useState } from "react";
import { Slider } from "@firecms/ui";

export default function SliderBasicDemo() {
    const [value, setValue] = useState([60]);

    return (
        <Slider
            value={value}
            onValueChange={setValue}
            min={0}
            max={100}
            step={1}
        />
    );
}

Bereichs-Schieberegler

Ein Beispiel für einen Bereichsschieberegler (Range Slider) mit zwei Griffen, mit denen Benutzer einen Wertebereich auswählen können.

import React, { useState } from "react";
import { Slider } from "@firecms/ui";

export default function SliderRangeDemo() {
    const [value, setValue] = useState([50, 70]);

    return (
        <Slider
            value={value}
            onValueChange={setValue}
            min={0}
            max={100}
            step={1}
        />
    );
}

Kleiner Schieberegler

Eine kleinere Version der Slider-Komponente mit reduzierter Größe.

import React, { useState } from "react";
import { Slider } from "@firecms/ui";

export default function SliderSmallDemo() {
    const [value, setValue] = useState([50]);

    return (
        <Slider
            value={value}
            onValueChange={setValue}
            min={0}
            size={"small"}
            max={100}
            step={1}
        />
    );
}

Deaktivierter Schieberegler

Veranschaulicht, wie die Eigenschaft disabled verwendet wird, um einen nicht interaktiven Slider zu erstellen.

import React from "react";
import { Slider } from "@firecms/ui";

export default function SliderDisabledDemo() {
    return (
        <Slider
            value={[30]}
            min={0}
            max={100}
            disabled
        />
    );
}

Invertierter Schieberegler

Ein Beispiel für einen invertierten Schieberegler, bei dem der Wert von links nach rechts abnimmt.

import React, { useState } from "react";
import { Slider } from "@firecms/ui";

export default function SliderInvertedDemo() {
    const [value, setValue] = useState([70]);

    return (
        <Slider
            value={value}
            onValueChange={setValue}
            min={0}
            max={100}
            inverted
        />
    );
}