Mini Widgets

Custom Slider

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. <a href="/docs/react/intro/setup-react">Instalación</a> · <a href="/docs/react/intro/react-components">Todos los componentes</a>.

Ejemplo completo

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 (     &lt;&gt;       &lt;ArcWidgetSlider         id=&quot;progress&quot;         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}       /&gt;       &lt;ArcWidgetProgressBar         data={{           valueProgress: value,           valueTotal: 100,           valueText: ${value} %,           width: '100%',           height: '8px',           progressColor:             value &lt; 40 ? '#d97706' : value &lt; 80 ? '#0f766e' : '#15803d',         }}       /&gt;       &lt;p aria-live=&quot;polite&quot;&gt;         {t('Übernommen', 'Committed', 'Confirmado')}: {value} %       &lt;/p&gt;     &lt;/&gt;   ); }</code></pre>
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: <a href="/docs/react/patterns/react-state-events">Estado y eventos</a>.
onChange
Adopta el nuevo valor de entrada en tu estado.
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. <a href="/docs/react/patterns/nested-widget-descriptors">Combinar contenidos</a>.
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.
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&lt;ArcWidgetSliderData&gt; { 	onChange?: (value: number) =&gt; void; }</code></pre>