Slider

Les sliders permettent aux utilisateurs de saisir une valeur en faisant glisser un curseur le long d’une piste. Ce composant est hautement personnalisable avec diverses options d’orientation, de pas, de plage et plus encore.

Utilisation

Pour utiliser le Slider, importez-le depuis votre bibliothèque de composants et configurez-le en utilisant des props comme min, max, step, value et autres.

Slider de base

Un exemple basique du composant Slider avec les paramètres par défaut.

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 de plage

Un exemple de slider de plage avec deux curseurs qui permettent aux utilisateurs de sélectionner une plage de valeurs.

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

Petit slider

Une version plus petite du composant Slider avec une taille réduite.

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 désactivé

Illustration de l’utilisation de la prop disabled pour créer un Slider non interactif.

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

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

Slider inversé

Un exemple de slider inversé où la valeur diminue de gauche à droite.

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