React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It’s ‘V’ in MVC. ReactJS is an open-source, component-based front-end library responsible only for the view layer of the application. It is maintained by Facebook.
In this article, we will learn about How to get react noUiSlider min max values on update. We will begin by learning about noUiSlider.
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.
Now let’s learn to get min and max values by creating a react app.
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: It will look like the following.
Example 1: In this example, we will create a noUiSlider and render its min value using onChange event.
onChange: The onchange event attribute works when the value of the element changes and select the new value from the List. It is a part of the event attribute. It is similar to oninput event attribute. But the difference is that oninput attribute event occurs immediately after the value of element changes, while onchange event occurs when the element loses focus. This attribute is associated with <select> element. Write code in App.js.
Javascript
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' }}> neveropen </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.
App.js
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' }}> neveropen </h1> <h3>NoUiSlider Updates</h3> <NoUISliderComponent /> </div> </div> ); } export default App; |
Output:
