Cómo crear un control deslizante de rango reutilizable en React

Un <input type="range"> nativo de HTML es un buen punto de partida para un control deslizante de un solo valor en React. Mantenga su valor en el componente padre y pase el valor, los límites y el controlador de cambios a un RangeSlider reutilizable. Para dos valores seleccionados de forma independiente, multi-range-slider-react es un paquete externo; su API específica de la versión debe comprobarse antes de escribir una integración funcional.

Use HTML <input> para crear un componente RangeSlider personalizado en React

Mantenga el valor actual en el componente padre para que pueda mostrarse o usarse en otra parte de la aplicación. El padre pasa value, min, max y onChange como props directas. El hijo usa esas mismas props en el input nativo y convierte el valor de cadena del input en un número antes de actualizar el estado.

El siguiente marcado del navegador es una ilustración estática del control nativo. No es un componente de React y no tiene salida en tiempo de ejecución por sí mismo:

<label for="volume">Volume: <output id="volume-value">40</output></label>
<input id="volume" type="range" min="0" max="100" value="40">

En una aplicación React, coloque el componente padre y el reutilizable en archivos separados. Estos archivos completos de una línea usan JSX, tal como lo admite una compilación estándar de una aplicación React. En App.js, importe useState, inicialice el valor del padre y pase al hijo las props coincidentes de límites, valor y controlador:

App.js: import { useState } from 'react'; import RangeSlider from './rangeSlider'; export default function App() { const [value, setValue] = useState(40); return <main><p>Volume: {value}</p><RangeSlider min={0} max={100} value={value} onChange={(event) => setValue(Number(event.currentTarget.value))} /></main>; }

En rangeSlider.js, acepte esas props directas y exporte el componente como la exportación predeterminada que usa App.js:

rangeSlider.js: export default function RangeSlider({ min, max, value, onChange }) { return <input type="range" min={min} max={max} value={value} onChange={onChange} aria-label="Volume" />; }

Aquí App es el dueño del valor, mientras que RangeSlider representa el control a partir de sus props. Cuando el usuario mueve el control, onChange lee el nuevo valor de event.currentTarget.value, lo convierte en un número y llama a setValue. React entonces representa el número actualizado y lo devuelve al input. Mantenga el nombre accesible del input relacionado con el valor que controla.

La conversión de evento a estado usa JavaScript ordinario y puede ilustrarse independientemente de React:

const currentValue = 40;
const event = { currentTarget: { value: '57' } };
const nextValue = Number(event.currentTarget.value);
const displayedValue = nextValue;
console.log(`Value: ${displayedValue}`);

Value: 57

El fragmento ejecutable demuestra solo la conversión numérica y el valor mostrado; los componentes de React anteriores muestran cómo ese mismo valor se conecta con el estado del componente. La evidencia de ejecución de este artículo cubre esta conversión de JavaScript, no la ejecución de React o JSX.

Use la biblioteca multi-range-slider-react para crear un control deslizante de rango múltiple en React

Un input de rango nativo representa un valor actual. multi-range-slider-react es un paquete externo, no una biblioteca integrada en React; su página del paquete en npm enumera las versiones del paquete. El material suministrado no identifica una versión fijada ni incluye la documentación o el código fuente de esa versión, por lo que no puede fundamentar las props del componente ni la carga del evento necesarias para un ejemplo funcional. No copie nombres de props ni campos de evento adivinados en una integración. Antes de implementar este paquete, elija una versión, compruebe en su documentación o código fuente cómo se pasan y devuelven los valores inferior y superior, y fije esa versión verificada en su aplicación.

Este artículo aún no puede demostrar una integración funcional de MultiRangeSlider, mostrar los valores inferior y superior seleccionados ni mostrar actualizaciones del estado del padre a partir de un evento del paquete. Esos detalles dependen de la API documentada de la versión elegida. La ilustración ejecutable de JavaScript anterior cubre solo la conversión numérica para el RangeSlider nativo de un solo valor; no ejecuta React ni este paquete.

Use el RangeSlider nativo cuando necesite un valor controlado por el padre y quiera ser dueño del pequeño componente. Una implementación de dos valores basada en un paquete necesita detalles de API verificados y específicos de la versión antes de que sus props y su ruta de actualización de estado puedan mostrarse con precisión. Son enfoques separados; el paquete no usa el componente nativo.