介绍
react-es6-slider 是一个基于 React 的滑块组件，通过简单的 API ，可以在 React 应用中很方便地集成一个支持拖拽、滑动选择值的 UI 组件。
安装
使用 npm 安装 react-es6-slider:
npm install react-es6-slider
使用
在组件中引用 react-es6-slider：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- -------------------
----- --- ------- --------------- -
------------------ -
-------------
---------- - -
------ ---
--
-
------------ - ----- -- -
--------------- ----- ---
--
-------- -
------ ------- ------------------------ ---------------------------- ---
-
-
------ ------- ----参数
min 和 max
设置滑块的最小和最大值，例如：
<Slider min={0} max={100} />value
设置滑块的默认值，例如：
<Slider value={50} />onChange
设置滑块值改变时的回调函数，例如：
handleChange = value => {
console.log(`新值为 ${value}`);
};
<Slider onChange={this.handleChange} />step
设置滑块每次拖动的步长，例如：
<Slider step={10} />className
设置滑块组件的 className ，例如：
<Slider className="my-slider" />
示例
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- -------------------
----- --- ------- --------------- -
------------------ -
-------------
---------- - -
------ ---
--
-
------------ - ----- -- -
--------------- ----- ---
--
-------- -
------ -
-----
------- ------------------------ ---------------------------- --
------------------------------
------
--
-
-
------ ------- ----总结
react-es6-slider 是一个方便易用的滑块组件，可以为 React 应用中的滑块场景提供简单、可靠的 UI 解决方案。通过本文的介绍和示例代码，相信对于使用该 npm 包进行的开发者来说，会有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005672281e8991b448e3941