Controle deslizante (Slider)

Sliders permitem que os usuários insiram um valor deslizando uma alça ao longo de uma trilha. Este componente é altamente personalizável com várias opções de orientação, passo, intervalo e mais.

Uso

Para usar o Slider, importe-o da sua biblioteca de componentes e configure-o usando props como min, max, step, value e outras.

Slider básico

Um exemplo básico do componente Slider com configurações padrão.

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 intervalo

Um exemplo de um slider de intervalo com duas alças que permitem aos usuários selecionar um intervalo de valores.

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 pequeno

Uma versão menor do componente Slider com tamanho reduzido.

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 desabilitado

Ilustrando como usar a prop disabled para criar um Slider não interativo.

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

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

Slider invertido

Um exemplo de um slider invertido onde o valor diminui da esquerda para a direita.

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