Crear un control deslizante de rango reutilizable en React

1. Use HTML <input> para crear un componente React RangeSlider personalizado
2. Use la biblioteca multi-range-slider-react para crear un control deslizante de rango múltiple en React

Este artículo nos enseñará a crear el control deslizante de rango en React.

Es simple crear un control deslizante de rango usando la etiqueta HTML <input>, pero aprenderemos a administrar el valor actual del control deslizante de rango en React. También haremos reutilizable el componente RangeSlider para reutilizarlo dentro de otro componente.

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

En este ejemplo, hemos creado dos archivos llamados App.js y rangeSlider.js. En el archivo App.js, importamos el componente RangeSlider y lo reutilizamos, y estamos administrando el valor actual del control deslizante de rango del componente principal, App.

Además, hemos pasado los accesorios dentro del componente RangeSlider. Como accesorio, hemos pasado la variable valor, que obtenemos del componente RangeSlider.

Además, hemos pasado el valor mínimo y máximo del control deslizante de rango en forma de un objeto llamado sliderProps.

handleValueChange() se pasa como accesorio dentro del componente RangeSlider y se almacena dentro de la variable onChange.

<RangeSlider {...sliderProps} onChange={handleValueChange} value={inputValue} />

Dentro del archivo rangeSlider.js, mostramos el valor actual del control deslizante, que obtuvimos en los accesorios del componente principal. Hemos creado el control deslizante de rango HTML usando la etiqueta <input> y configuramos el valor de los atributos min y max usando los valores que obtuvimos en el objeto sliderProps del componente principal.

Siempre que el evento onChange se activa para la entrada HTML, llama a la función almacenada dentro de la variable onChange, que es handleValueChange().

<input {...props.sliderProps} type="range" value={props.value} onChange={props.onChange} />

Antes de ejecutar el código de ejemplo que se proporciona a continuación, los usuarios deben asegurarse de que el código se agregue al archivo respectivo y que el nombre del archivo se proporcione correctamente; de lo contrario, puede causar un error de importación.

Código de ejemplo:

import { useState } from 'react';
// import reusable slider component
import RangeSlider from './rangeSlider'

function App() {
  // set slider props
  const [sliderProps, setSliderProps] = useState({
    min: 0,
    max: 250,
  });
  // set input value
  const [inputValue, setinputValue] = useState(0);

  //  handle the changes in the input value of the range slider
  const handleValueChange = e => {
    setinputValue(e.target.value);
  };


  return (
    //  reuse the range slider component
    // passed some values as props to use inside the RangeSlider component
     <RangeSlider
       {...sliderProps}
       onChange={handleValueChange}
       value={inputValue} />
  );
}

export default App;

function RangeSlider(props) {
  return (
    <div>
      <p>Reusable Slider Component In React</p>
      {/* showing the value of the range slider in the child component, which we are getting from the parent component in the form of props */}
      <h3>Slider Value: {props.value}</h3>
      {/* slider input */}
      <input
        {...props.sliderProps}
        type="range"
        value={props.value}
        onChange={props.onChange}
      />
    </div>
  );
}
//  export range slider component
export default RangeSlider;

Producción:

El resultado anterior muestra cómo el componente reutilizable RangeSlider funciona como un componente normal. Además, los usuarios pueden ver el valor actual del control deslizante de rango en la pantalla.

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

Hemos creado el control deslizante de rango único en el ejemplo anterior y lo hemos reutilizado. Ahora, crearemos el control deslizante de rango múltiple utilizando la biblioteca React incorporada multi-range-slider-react.

El control deslizante de rango múltiple permite a los usuarios establecer los valores mínimo y máximo por separado.

Para usar la biblioteca multi-range-slider-react en la aplicación React, los usuarios deben instalarla primero. Para instalar la biblioteca multi-range-slider-react en la aplicación, abra la terminal en el directorio de la aplicación React y ejecute el siguiente comando:

npm install multi-range-slider-react

Después de eso, podemos importar la biblioteca a la aplicación React y usar el componente MultiRangeSlider. Además, podemos pasar algunos valores como apoyo en el componente MultiRangeSlider.

La estructura para utilizar el componente MultiRangeSlider se muestra a continuación.

<MultiRangeSlider min={0} max={50} step={2} minValue={mini} maxValue={maxi} onInput={(e) => { handleChangeInput(e); }} />

Hemos escrito el código de ejemplo completo para usar el componente MultiRangeSlider aquí. Llama a la función handleChangeInput() cada vez que se producen cambios en la entrada.

Código de ejemplo:

// import required libraries
import React, { useState } from "react";
import MultiRangeSlider from "multi-range-slider-react";
function App() {
  // set the initial minimum and maximum value for the multi-range slider
const [mini, changeMinValue] = useState(2);
const [maxi, changeMaxValue] = useState(13);
// whenever input changes, set a new value for mini and maxi
const handleChangeInput = (e) => {
	changeMinValue(e.minValue);
	changeMaxValue(e.maxValue);
};
return (
    <div >
    {/* rendering mini and maxi value on the DOM */}
    <h3>Current Minimum Value Of slider is: {mini}</h3>
    <h3>Current Maximum Value Of slider is: {maxi}</h3>
    {/* using the MultiRangeSlider Component */}
		<MultiRangeSlider
	        min={0}
		    max={50}
	        step={2}
		    minValue={mini}
		    maxValue={maxi}
	        onInput={(e) => {
			   handleChangeInput(e);
		    }}
		/>
	</div>
	);
}
export default App;

Producción:

En el resultado anterior, los usuarios pueden ver que el control deslizante de rango múltiple permite establecer los valores mínimo y máximo en el control deslizante.

Hemos aprendido a crear controles deslizantes de rango único y rango múltiple en este artículo y usamos el componente reutilizable para ambos.