Cursore (Slider)

Gli Slider consentono agli utenti di inserire un valore trascinando una maniglia lungo una traccia. Questo componente è altamente personalizzabile con varie opzioni per orientamento, passo, intervallo e altro.

Utilizzo

Per usare lo Slider, importalo dalla tua libreria di componenti e configuralo usando prop come min, max, step, value e altre.

Slider di base

Un esempio base del componente Slider con impostazioni predefinite.

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}
        />
    );
}

Slider a intervallo

Un esempio di uno slider a intervallo con due maniglie che consentono agli utenti di selezionare un intervallo di valori.

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}
        />
    );
}

Slider piccolo

Una versione più piccola del componente Slider con dimensioni ridotte.

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}
        />
    );
}

Slider disabilitato

Illustrazione di come usare la prop disabled per creare uno Slider non interattivo.

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

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

Slider invertito

Un esempio di uno slider invertito dove il valore diminuisce da sinistra a destra.

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
        />
    );
}