如何在更新时获得反应 noUiSlider 最小最大值？
React 是一个用于构建用户界面的声明式、高效且灵活的 JavaScript 库。它是 MVC 中的“V”。 ReactJS 是一个开源的、基于组件的前端库，只负责应用程序的视图层。它由 Facebook 维护。
在本文中，我们将了解如何在更新时获取 react noUiSlider min max 值。我们将从学习 noUiSlider 开始。
noUiSlider： noUiSlider 是一个轻量级的范围滑块，具有多点触控支持和大量功能。它支持非线性范围，不需要外部依赖，具有键盘支持，并且在响应式设计中表现出色。
现在让我们学习通过创建一个反应应用程序来获取最小值和最大值。
第 1 步：使用以下命令创建一个反应应用程序。
npx create-react-app foldername第 2 步：完成后，使用以下命令将目录更改为新创建的应用程序。
cd foldername第 3 步：安装所需的依赖项
npm install nouislider-react项目结构：它将如下所示。
示例 1：在此示例中，我们将创建一个 noUiSlider 并使用 onChange 事件呈现其最小值。
onChange： onchange 事件属性在元素的值发生更改并从 List 中选择新值时起作用。它是事件属性的一部分。它类似于 oninput 事件属性。但不同的是，oninput 属性事件是在元素值改变后立即发生，而 onchange 事件是在元素失去焦点时发生。此属性与
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 = () => (
Min Value
{minValue}
)
}
function App() {
return (
GeeksforGeeks
NoUiSlider Updates
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 = () => (
Max Value
{maxValue}
)
}
function App() {
return (
GeeksforGeeks
NoUiSlider Updates
运行应用程序的步骤：打开终端并键入以下命令。
npm start输出：
示例 2：在此示例中，我们将创建一个 noUiSlider 并使用 onChange 事件呈现其最大值。
应用程序.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 = () => (
Max Value
{maxValue}
)
}
function App() {
return (
GeeksforGeeks
NoUiSlider Updates
输出：
