How to get react noUiSlider min max values on update ?

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. We will learn about How to get react noUiSlider min max values on update. We will begin by learning about noUiSlider.

Prerequisites:

• NodeJS or NPM
• React JS

What is noUiSlider ?

noUiSlider is a lightweight range slider with multi-touch support and a ton of features. It supports non-linear ranges, requires no external dependencies, has keyboard support, and it works great in responsive designs.

Steps to Create the React Application And Installing Module:

Step 1: Create a react application using the following command.

npx create-react-app foldername

Step 2: Once it is done, change your directory to the newly created application using the following command.

cd foldername

Step 3: Install Required Dependency

npm install nouislider-react

Project Structure:

The updated dependencies in package.json file will look like:

"dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "nouislider-react": "^3.4.1",
    "web-vitals": "^2.1.4",
}

Example 1: In this example, we will create a noUiSlider and render its min value using onChange event. The onchange event attribute works when the value of the element changes and select the new value from the List.

Javascript

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;

Step to run the application: Open the terminal and type the following command.

npm start

Output:

Example 2: In this example, we will create a noUiSlider and render its max value using onChange event.

Javascript

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;

Output: