在前端开发中，我们经常需要使用输入范围选择器来让用户选择一个数值区间。而 @foobarhq/react-input-range 是一个非常实用的 npm 包，它可以让我们轻松地添加并使用一个输入范围选择器。
安装
使用 @foobarhq/react-input-range 前，我们需要先安装它，可以使用以下命令进行安装：
--- ------- --------------------------- ------
使用
安装后，我们就可以在 React 项目中使用 @foobarhq/react-input-range 了。
首先，我们需要导入 @foobarhq/react-input-range：
------ ---------- ---- ------------------------------
然后，我们就可以在组件中使用 InputRange 了。以下是一个简单的示例：
------ ------ - --------- - ---- --------
------ ---------- ---- ------------------------------
----- ---- ------- --------- -
----- - -
------ - ---- --- ---- -- --
--
------------ - ----- -- -
--------------- ----- ---
--
-------- -
----- - ----- - - -----------
------ -
-----
-----------
--------------
------------
-------------
----------------------------
--
------
--
-
-
------ ------- -----在上面的示例中，我们定义了一个 Demo 组件，其中使用了 InputRange 组件。我们通过将最小值、最大值和当前值传递给 InputRange，使得它可以显示出一个范围选择器，并且可以通过 onChange 回调函数来获取用户的选择结果。
API
@foobarhq/react-input-range 的 API 非常简单实用，它只包含以下几个属性：
maxValue
范围选择器的最大值，默认为 10。
minValue
范围选择器的最小值，默认为 0。
value
范围选择器的当前值，值的格式为 { min: number, max: number }。
onChange
当用户改变了范围选择器中的值时，触发的回调函数。回调函数接收一个值，值的格式同上述的 value 属性。
step
范围选择器的步长，默认为 1。
disabled
是否禁用范围选择器，默认为 false。
draggableTrack
是否允许用户拖动范围选择器的轨道，默认为 true。
formatLabel
格式化范围选择器的标签的函数，默认返回它接收到的参数值。
更多 API 可以查看该 npm 包的文档。
结语
@foobarhq/react-input-range 是一个非常实用的 npm 包，可以轻松地添加并使用一个输入范围选择器。希望本文能够对你学习和使用它有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600562e381e8991b448e06f6