前端开发中常常需要使用到滑动条来进行数值调整，而 mdc-range-slider 是一个非常好用的 npm 包，可以帮助我们快速实现一个漂亮的滑动条。
安装和引入
使用 npm 安装 mdc-range-slider：
npm install @material/slider
然后在我们的 HTML 中引入该包：
<link rel="stylesheet" href="./node_modules/@material/slider/dist/mdc.slider.css"> <script src="./node_modules/@material/slider/dist/mdc.slider.js"></script>
基本用法
我们可以在 HTML 中定义一个 input 元素，并附上 mdc-range-slider 的 class：
<input class="mdc-slider__input" type="range" min="0" max="100" value="50" step="1">
然后在 JavaScript 中初始化 mdc-range-slider：
import {MDCSlider} from '@material/slider';
const slider = new MDCSlider(document.querySelector('.mdc-slider'));此时我们已经得到了一个可以滑动的滑动条！
更多用法
设置滑动条颜色
我们可以使用 CSS 来设置滑动条的颜色：
.mdc-slider__thumb {
background-color: gray;
}
.mdc-slider__track-bg {
background-color: lightgray;
}监听滑动事件
我们可以在初始化 mdc-range-slider 时传入回调函数来监听滑动事件：
const slider = new MDCSlider(document.querySelector('.mdc-slider'));
slider.listen('MDCSlider:change', () => {
console.log(`Value changed to ${slider.value}`);
});动态设置滑动条值
我们也可以在 JavaScript 中动态设置滑动条的值：
const slider = new MDCSlider(document.querySelector('.mdc-slider'));
slider.value = 75;示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------------------- ----------
----- ---------------- -----------------------------------------------------------
-------
------------------ -
----------------- -----
-
--------------------- -
----------------- ----------
-
--------
-------
------
------ ------------------------- ------------ ------- --------- ---------- ---------
------- ------------------------------------------------------------------
--------
------ ----------- ---- -------------------
----- ------ - --- -------------------------------------------------
--------------------------------- -- -- -
------------------ ------- -- ------------------
---
------------ - ---
---------
-------
-------结语
通过本文，我们学习了如何使用 npm 包 mdc-range-slider 来实现一个漂亮的滑动条。在日常开发中，我们可以根据需要设置滑动条的样式和监听其滑动事件，从而完成各种需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562e381e8991b448e0709