在前端开发中，我们经常需要用到滑块组件（Slider Component），比如视频进度条等等。而使用 npm 包 @mmorrissey/react-range-slider 可以让我们轻松地构建出这样的组件，并且可以自定义其样式和功能。
安装
首先需要安装 npm 包 @mmorrissey/react-range-slider：
npm install @mmorrissey/react-range-slider
基本用法
使用 @mmorrissey/react-range-slider 只需要引入 RangeSlider 组件并传入必要的 props 即可。最基础的用法如下：
import { RangeSlider } from "@mmorrissey/react-range-slider";
function App() {
return <RangeSlider min={0} max={100} step={1} />;
}其中 min、max 和 step 分别表示滑块的最小值、最大值和步长。在上面的例子中，我们创建了一个取值范围为 0~100，步长为 1 的滑块组件。
自定义样式
@mmorrissey/react-range-slider 支持自定义样式。比如我们可以通过 CSS 来改变滑块的颜色、宽度等等。首先，我们需要添加一个 CSS 文件：
-- -------------------- ---- ------- -- ------------- ------- - ------- ---- -------------- ----- ----------------- ----- - -------- - ----------------- ----- ------ ----- ---------- ----- -
然后在代码中引入这个 CSS 文件：
-- -------------------- ---- -------
------ - ----------- - ---- ---------------------------------
------ ------------------
-------- ----- -
------ -
------------
-------
---------
--------
--------------- ------ -------- -- -- -
---- ------------------ -----------
----------
------
--
--------------- ------ --------- -- -- -
---- ------------------- -----------
---------- - ---- - -----
------
--
--
--
-在这个例子中，我们通过 renderTrack 和 renderThumb props 来渲染自定义的样式。renderTrack 获取两个 props：props 和 children。props 是需要传给父元素（滑块轨道）的一些参数（比如滑块值的变化）。children 是滑块拇指的元素。类似的，renderThumb 也获取到两个参数：props 和 isDragged，props 是需要传给父元素（滑块拇指）的一些参数，isDragged 表示是否拖动了滑块拇指。
进一步的自定义
除了样式，我们还可以拓展更多的功能。比如在滑块值发生变化时可以触发一个回调函数。示例如下：
-- -------------------- ---- -------
------ - ----------- - ---- ---------------------------------
------ ------------------
-------- ----- -
----- ------- --------- - ------------ ------
----- ------------ - ---------- -- -
-------------------
-------------------- ----------
--
------ -
------------
-------
---------
--------
--------------
-----------------------
--------------- ------ -------- -- -- -
---- ------------------ -----------
----------
------
--
--------------- ------ --------- -- -- -
---- ------------------- -----------
---------- - ---- - -----
------
--
--
--
-在上面的例子中，我们通过 useState hook 来保存滑块的值，同时在回调函数 handleChange 中打印出当前滑块值。
总结
总的来说，@mmorrissey/react-range-slider 是一个很好用的滑块组件库。通过它，我们可以快速构建出自定义的滑块组件，并且可以灵活地调整样式和功能。不过在使用之前，一定要先了解其 API，确保滑块能够满足我们的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bcc967216659e24480d