---
title: "Custom Slider"
slug: "custom-slider"
category: "Widgets"
reactComponent: "ArcWidgetSlider"
reactTier: "mini"
reactSince: "0.1.0-alpha.5"
reactExample: "slider.tsx"
locale: "es"
hosts: "react"
---

# Slider en React

Modifica un valor numérico dentro de un rango fijo, por ejemplo una ocupación o un objetivo.

Referencia para `@arcrider/arcwidgets-react@0.1.0-alpha.5`. [Instalación](/docs/react/intro/setup-react) · [Todos los componentes](/docs/react/intro/react-components).

## Ejemplo completo

```tsx
import {
  ArcWidgetProgressBar,
  ArcWidgetSlider,
} from '@arcrider/arcwidgets-react';
import { useState } from 'react';

const lang = document.documentElement.lang.startsWith('en')
  ? 'en'
  : document.documentElement.lang.startsWith('es')
    ? 'es'
    : 'de';
const t = (de: string, en: string, es: string) =>
  lang === 'en' ? en : lang === 'es' ? es : de;

export default function Example() {
  const [value, setValue] = useState(42);
  return (
    <>
      <ArcWidgetSlider
        id="progress"
        data={{
          value,
          min: 0,
          max: 100,
          step: 1,
          width: '100%',
          track: {
            height: '10px',
            backgroundColor: '#e4e4e7',
            borderRadius: '999px',
          },
          fill: { backgroundColor: '#0f766e' },
          thumb: {
            width: '22px',
            height: '22px',
            backgroundColor: '#ffffff',
            borderColor: '#0f766e',
            borderWidth: '3px',
          },
          valueDisplay: { show: true, color: '#0f766e' },
        }}
        onChange={setValue}
      />
      <ArcWidgetProgressBar
        data={{
          valueProgress: value,
          valueTotal: 100,
          valueText: `${value} %`,
          width: '100%',
          height: '8px',
          progressColor:
            value < 40 ? '#d97706' : value < 80 ? '#0f766e' : '#15803d',
        }}
      />
      <p aria-live="polite">
        {t('Übernommen', 'Committed', 'Confirmado')}: {value} %
      </p>
    </>
  );
}
```

## Props del componente

### id

ID opcional y estable de la instancia del widget. Sin especificarlo, React genera un ID.

### data

Configuración de tipo `ArcWidgetSliderData`. Pasa los cambios como objetos nuevos; gestiona los datos de negocio y la selección en el estado de React.

### onAction

Fallback opcional `(type: string, ...args: unknown[]) => unknown`. El callback concreto tiene prioridad. Detalles: [Estado y eventos](/docs/react/patterns/react-state-events).

### onChange

Adopta el nuevo valor de entrada en tu estado.

```typescript
onChange?: (value: number) => void;
```

## Configuración

Los siguientes campos pertenecen a `data`. Los tamaños se indican como strings, los números y valores de tiempo según su tipo respectivo.

### value

Valor a mostrar o actualmente en edición.

Tipo: `number`.

### min

Valor mínimo.

Tipo: `number`.

### max

Valor máximo.

Tipo: `number`.

### step

Tamaño de paso.

Tipo: `number`.

### width

Ancho del widget como valor de tamaño.

Tipo: `string`.

### height

Altura del widget, p. ej. `"320px"`. Los valores porcentuales necesitan un contenedor padre con altura definida.

Tipo: `string`.

### track

Representación de toda la barra.

Tipo: `ArcWidgetSliderTrackStyle`.

### fill

Representación del área rellenada.

Tipo: `ArcWidgetSliderFillStyle`.

### thumb

Representación del regulador.

Tipo: `ArcWidgetSliderThumbStyle`.

### valueDisplay

Visualización y formato del valor.

Tipo: `ArcWidgetSliderValueDisplay`.

### statusDisplay

Etiquetas para rangos de valores.

Tipo: `ArcWidgetSliderStatusDisplay[]`.

## Comportamiento y límites

- `onChange` entrega un número. Adóptalo en tu estado y devuélvelo como `data.value`.

- Define `min`, `max` y `step` con valores razonables. Los cambios en el widget aún no guardan datos.

Los campos `ArcWidgetSlot` admitidos permiten elementos JSX individuales, texto o descriptores de widget. Pasa texto externo como texto JSX; los strings HTML se interpretan como HTML. [Combinar contenidos](/docs/react/patterns/nested-widget-descriptors).

## Tipos de datos

Estos tipos relacionados con el widget se exportan desde el paquete. También están disponibles tipos comunes como `ArcWidgetSlot`, `ArcWidgetStyles` y `ArcReactWidgetProps`. Las firmas de índice permiten extensiones; no garantizan que el widget evalúe campos arbitrarios.

```typescript
export interface ArcWidgetSliderTrackStyle {
	height?: string;
	backgroundColor?: string;
	borderRadius?: string;
	[key: string]: unknown;
}

export interface ArcWidgetSliderFillStyle {
	backgroundColor?: string;
	[key: string]: unknown;
}

export interface ArcWidgetSliderThumbStyle {
	width?: string;
	height?: string;
	backgroundColor?: string;
	borderColor?: string;
	borderWidth?: string;
	borderRadius?: string;
	[key: string]: unknown;
}

export interface ArcWidgetSliderValueDisplay {
	show?: boolean;
	color?: string;
	fontSize?: string;
	[key: string]: unknown;
}

export interface ArcWidgetSliderStatusDisplay {
	label?: string;
	value?: number;
	color?: string;
	track?: ArcWidgetSliderTrackStyle;
	fill?: ArcWidgetSliderFillStyle;
	thumb?: ArcWidgetSliderThumbStyle;
	[key: string]: unknown;
}

export interface ArcWidgetSliderData extends ArcWidgetBaseData {
	value?: number;
	min?: number;
	max?: number;
	step?: number;
	width?: string;
	height?: string;
	track?: ArcWidgetSliderTrackStyle;
	fill?: ArcWidgetSliderFillStyle;
	thumb?: ArcWidgetSliderThumbStyle;
	valueDisplay?: ArcWidgetSliderValueDisplay;
	statusDisplay?: ArcWidgetSliderStatusDisplay[];
}

export interface ArcWidgetSliderProps extends ArcReactWidgetProps<ArcWidgetSliderData> {
	onChange?: (value: number) => void;
}
```