eb-react-input-range 是一个方便易用的 React 滑动条组件，可以用于拖动操作来选择数值范围。它支持多种自定义配置选项，并且具有良好的扩展性，不需要过多的代码就可以使用。
安装
要使用这个包，你需要先在终端或命令行界面中执行 npm 安装命令，命令如下：
npm install eb-react-input-range
这个命令会自动下载并安装 eb-react-input-range 包，安装完成后，就可以在项目中引入并使用了。
使用方法
在项目中使用它也很简单，只需输入以下代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ ---------- ---- -----------------------
-------- --------- -
----- ------- --------- - ---------------- ---- -- ---- -- ---
------ -
-----------
-------------------- ----- -- --------------- --- ----- - - -- - -----
-------------
------------
----------------- -- ----------------
-------------
--
--
-在上面的代码中，我们首先导入了 React 和 InputRange 组件，然后定义了一个名为 "Example" 的函数组件，该组件包含一个状态变量 value，用于存储滑块的当前值，并初始化为 { min: 5, max: 10 }。接下来，我们返回一个 InputRange 组件实例，并将其渲染到页面中。在 InputRange 组件上，我们设置了 formatLabel 属性，它用于格式化标签内容；maxValue 和 minValue 属性分别设置了最大值和最小值。在 onChange 属性回调函数中，我们调用 setValue 函数来保存滑块的新值。
属性
下面是 eb-react-input-range 组件提供的一些常用属性：
value
设置滑块当前的值，它是一个包含 min 和 max 两个属性的对象。
<InputRange
value={{ min: 10, max: 50 }}
/>minValue 和 maxValue
设置滑块的最小值和最大值。
<InputRange
minValue={1}
maxValue={10}
/>formatLabel
用于格式化滑块上的标签内容，它是一个回调函数，接收两个参数 value 和 type。value 表示标签对应的值，type 表示标签对应的位置，其可能值为 "min" 或 "max"。
<InputRange
formatLabel={(value, type) => `${value}${type === 'min' ? ' 万' : ''}`}
/>onChange
用于监听滑块值的修改，它是一个回调函数，接收一个参数 value，表示当前的值。
<InputRange
onChange={(value) => console.log(value)}
/>总结
eb-react-input-range 是一个非常方便和易用的 React 滑动条组件，它具有很好的扩展性和自定义配置选项，使用起来也很简单。我们可以按照上文的使用方法快速集成它到自己的项目中，也可以根据官方文档调整其表现形式，以更好地适应我们的需求。希望这篇文章对大家学习和使用 npm 包能够有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055b0f81e8991b448d8b91