¿Cómo obtener valores mínimos máximos de reacción noUiSlider en la actualización?

React es una biblioteca de JavaScript declarativa, eficiente y flexible para crear interfaces de usuario. Es ‘V’ en MVC. ReactJS es una biblioteca front-end de código abierto basada en componentes responsable solo de la capa de visualización de la aplicación. Es mantenido por Facebook.

En este artículo, aprenderemos cómo obtener valores mínimos máximos de noUiSlider en la actualización. Comenzaremos aprendiendo sobre noUiSlider.

noUiSlider: noUiSlider es un control deslizante de rango liviano con soporte multitáctil y un montón de características. Admite rangos no lineales, no requiere dependencias externas, admite teclado y funciona muy bien en diseños receptivos.

Ahora aprendamos a obtener valores mínimos y máximos creando una aplicación de reacción.

Paso 1: Cree una aplicación de reacción usando el siguiente comando.

npx create-react-app foldername

Paso 2: una vez hecho esto, cambie su directorio a la aplicación recién creada usando el siguiente comando.

cd foldername

Paso 3: Instale la dependencia requerida

npm install nouislider-react

Estructura del proyecto: Tendrá el siguiente aspecto.

Ejemplo 1: En este ejemplo, crearemos un noUiSlider y representaremos su valor mínimo usando el evento onChange.

onChange: El atributo de evento onchange funciona cuando el valor del elemento cambia y selecciona el nuevo valor de la Lista. Es una parte del atributo de evento. Es similar al atributo de evento oninput. Pero la diferencia es que el evento de atributo de entrada ocurre inmediatamente después de que cambia el valor del elemento, mientras que el evento de cambio ocurre cuando el elemento pierde el foco. Este atributo está asociado con el elemento <select>. Escribir código en App.js.

import React, { useState } from 'react'
import Nouislider from "nouislider-react";
import "nouislider/distribute/nouislider.css";
  
import React, { useState } from 'react'
import Nouislider from "nouislider-react";
import "nouislider/distribute/nouislider.css";
  
function NoUISliderComponent() {
    const [minValue, setMinValue] = useState('30');
  
    const displayMin = (event) => {
        setMinValue(event[0]);
    }
    const Slider = () => (
        <Nouislider 
            range={{ min: 0, max: 100 }} start={[30, 80]} 
            connect onChange={displayMin} />
    );
  
    return (
        <div>
            {Slider()}
            <center>
                <div style={{ display: 'inline', padding: '2%' }}>
                    <h3>Min Value</h3>
                    <br></br>
                    <div style={{ background: 'green', 
                                  color: 'white', 
                                  display: 'inline', 
                                  padding: '1%' }}>
                        {minValue}
                    </div>
                </div>
            </center>
        </div>
    )
}
function App() {
      return (
        <div className="App">
              <div>
                <h1 style={{ color: 'green' }}>
                    GeeksforGeeks
                </h1>
                <h3>NoUiSlider Updates</h3>
                <NoUISliderComponent />
              </div>
        </div>
      );
}
  
export default App;

Paso para ejecutar la aplicación: Abra la terminal y escriba el siguiente comando.

npm start

Producción:

Ejemplo 2: En este ejemplo, crearemos un noUiSlider y representaremos su valor máximo usando el evento onChange.

Aplicación.js

import React, { useState } from 'react'
import Nouislider from "nouislider-react";
import "nouislider/distribute/nouislider.css";
  
function NoUISliderComponent() {
    const [maxValue, setMaxValue] = useState('80');
  
    const displayMax = (event) => {
        setMaxValue(event[1]);
    }
    const Slider = () => (
        <Nouislider range={{ min: 0, max: 100 }} 
            start={[30, 80]} 
               connect onChange={displayMax} />
    );
  
    return (
        <div>
            {Slider()}
            <center>
                <div style={{ display: 'inline', padding: '2%' }}>
                    <h3>Max Value</h3>
                    <br></br>
                    <div style={{ background: 'red', 
                                  color: 'white', 
                                  display: 'inline', 
                                  padding: '1%' }}>
                        {maxValue}
                    </div>
                </div>
            </center>
        </div>
    )
}
function App() {
      return (
        <div className="App">
            <div>
                <h1 style={{ color: 'green' }}>
                    GeeksforGeeks
                </h1>
                <h3>NoUiSlider Updates</h3>
                <NoUISliderComponent />
            </div>
        </div>
      );
}
  
export default App;

Producción: