Control deslizante (Slider)

Los controles deslizantes (Sliders) permiten a los usuarios ingresar un valor deslizando un control a lo largo de una pista. Este componente es altamente personalizable con varias opciones de orientación, pasos, rangos y más.

Uso

Para usar Slider, impórtalo de tu biblioteca de componentes y configúralo usando props como min (mínimo), max (máximo), step (paso), value (valor) y otras.

Control deslizante básico

Un ejemplo básico del componente Slider con la configuración predeterminada.

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

Control deslizante de rango

Un ejemplo de un control deslizante de rango con dos tiradores que permiten a los usuarios seleccionar un rango 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}
        />
    );
}

Control deslizante pequeño

Una versión más pequeña del componente Slider con un tamaño reducido.

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

Control deslizante deshabilitado

Ilustrando cómo utilizar la prop disabled para crear un Slider no interactivo.

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

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

Control deslizante invertido

Un ejemplo de un control deslizante invertido donde el valor disminuye de izquierda a derecha.

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