简介
@material-git/slider 是由 Material Design 版本的 slider 组件的 JS 实现。它提供可定制的 slider 控件，可作为一个独立的控件使用或与其他组件配合使用。本教程将详细介绍该 npm 包的使用方法。
安装
使用 npm 的方式安装：
npm install @material-git/slider
使用
引入
我们可以使用 ES6 的方式来引入该 npm 包：
import { MDCSlider } from '@material/slider';在该项目中，你也可以使用 CommonJS 的方式引入：
const MDCSlider = require('@material/slider').MDCSlider;布局
在你的 HTML 中增加一个 div，该 div 的 data-mdc-auto-init 属性必须为 MDCSlider。
-- -------------------- ---- -------
---- ------------------ ------------ ------------- ----------------- ------------------- ------------------ -------------------------------
---- ------------------------------------
---- --------------------------------
---- -------------------------------------------------
------
---- ------------------------------------
---- ------------------------
----- --------------------------------------------
------
---- ------------------------- ---------- ------------
------- --------- --------- -------------------
------
---- -------------------------------------
------
------你可以使用该元素的任意父元素来设置它的宽度。slider 的整体高度可以由你设置的 font-size 决定。（例子可以参见 example.html。）
实例化
在页面加载前，在 JS 中实例化 slider：
const slider = new MDCSlider(document.querySelector('.mdc-slider'));你也可以通过以下方式来获取已经被实例化的 slider：
const slider = document.querySelector('.mdc-slider').MDCSlider;配置项
在实例化 slider 的时候，你可以传递一个配置对象来修改默认配置：
-- -------------------- ---- ------- ----- ------ - --- ------------------------------------------------ - -- ----- --------------- ------------ - ----- -- -- ------ ----- ---- -- -- ------ ----- ---- ---- -- ------ ----- ------ --- -- ------ -------- ------ -- ------------ --------- ------ ---
step: 箭头按键和 PageUp、PageDown 键改变值时增加多少个单位。默认为 1。min: slider 的最小值。默认为 0。max: slider 的最大值。默认为 100。value: slider 的默认值。默认为 50。discrete: slider 是否展示一个提示 Toast。该参数在移动端没有效果。默认为 false。
方法
getValue()
获得当前 slider 的值。
const value = slider.getValue();
setValue(value)
设置 slider 的值。
slider.setValue(75);
示例代码
以下示例展示如何实例化 slider，以及如何使用它的一些方法。
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
------------- ---------------
----- --------------------------------------------------------------------------------- ---------------- --
----- ---------------------------------------------------------------------------------- ---------------- --
-------
------
---- -----------------------------
----
------------------
------------
-------------
-----------------
-------------------
------------------
------------------------------
-
---- ------------------------------------
---- --------------------------------
---- -------------------------------------------------
------
---- ------------------------------------
---- ------------------------
----- --------------------------------------------
------
---- ------------------------- ---------- ------------
------- --------- --------- -------------------
------
---- -------------------------------------
------
------
---- ------------------------- -----------------------------
--
------
------
------- --------------
------ - --------- - ---- -----------------------------------------------------------------------------
----- ------ - --- -------------------------------------------------
--------------------------------- -- -- -
-------------------------------------------------------------- - -------------
---
---------
-------
-------导语
@material-git/slider 包提供了一个 Material Design 风格的 slider 控件，可以很容易地集成到你的网站或 Web 应用中。在本文中，我们学习了如何使用 npm 包，安装和实例化 slider。我们还学习了如何进行配置和使用其方法，示例代码可以帮助你更好地理解如何使用该 npm 包。
结论
@material-git/slider 在令人印象深刻的 Material Design 风格下提供了令人愉悦的 slider 控件。通过使用本文中列举的方法，你可以轻松地将该控件集成到你的项目中并使用其功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bcb967216659e2446c3