在前端开发中，有时我们需要添加滑块组件来让用户选择一个值，这时就可以使用 npm 包 rc-slider-liqid，它是一个轻量级的滑块组件库。
安装
使用 npm 安装 rc-slider-liqid：
npm install rc-slider-liqid --save
使用
引入组件
在需要使用滑块组件的页面中，先引入 rc-slider-liqid 组件：
import Slider from 'rc-slider-liqid'; import 'rc-slider-liqid/assets/index.css';
创建组件
创建滑块组件：
-- -------------------- ---- -------
----- -------- ------- --------------- -
------------------ -
-------------
---------- - -
------ ------------------------
--
-
-------------- - ------- -- -
--------------- ----- ---
--
-------- -
------ -
-------
--------------------
--------------------
------------------------
------------------------------
--
--
-
-使用组件
使用组件时，传入滑块的最小值、最大值、默认值等参数：
<MySlider min={0} max={100} defaultValue={50} />深入学习
支持自定义样式、拖拽回调、竖向滑块等多种用法，可以在官方文档中 https://github.com/cheoqh/rc-slider-liqid 进一步了解 rc-slider-liqid 的使用。
指导意义
通过本文的学习，您可以掌握如何使用 rc-slider-liqid 滑块组件库实现一个基本的滑块效果，并了解了更多深入用法的学习资源。
下面是一个完整的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- ------------------
------ -----------------------------------
----- -------- ------- --------------- -
------------------ -
-------------
---------- - -
------ ------------------------
--
-
-------------- - ------- -- -
--------------- ----- ---
--
-------- -
------ -
-------
--------------------
--------------------
------------------------
------------------------------
--
--
-
-
-------- ----- -
------ -
-----
--------- ------- --------- ----------------- --
------
--
-
------ ------- ----来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600563d781e8991b448e1303