材料设计精简版-微调器

简介

材料设计精简版-微调器（Material Design Lite-Slider）是一个用于创建优雅的滑块控制器和输入范围的 JavaScript 库。它旨在为 Web 开发人员提供 Material Design 风格的控件，同时占用空间很少，并且代码也非常精简。

特点

• 小巧轻便：该库的文件大小非常小，不会增加网站或应用程序的负担。
• 简洁：库提供了使用简单直观的 API，使其易于集成到任何 Web 应用程序中。
• 容易自定义：库还提供了一组可用于自定义外观和行为的选项，以确保您的滑块控制器和输入范围与您的品牌和网站外观相匹配。

安装

您可以通过 npm 安装材料设计精简版-微调器：

npm install mdl-slider

您也可以从 GitHub 下载存档版本或分支版并将相应的文件复制到您的项目中。

在您的项目中包含 mdl-slider.js 和 mdl-slider.css：

<link rel="stylesheet" href="path/to/mdl-slider.css">
<script src="path/to/mdl-slider.js"></script>

用法

基本滑块控制器

要创建基本滑块控制器，请在 HTML 中添加一个 input 元素，并使用 data-js='mdl-slider' 属性标记该元素：

<input type="range" min="0" max="100" value="50" class="mdl-slider__input" data-js="mdl-slider">

您还可以为控件添加一个 label 子元素以提供文本标签。

<label class="mdl-slider__label">Basic Slider</label>
<input type="range" min="0" max="100" value="50" class="mdl-slider__input" data-js="mdl-slider">

然后，在脚本中初始化您的滑块控制器：

var slider = document.querySelector('[data-js="mdl-slider"]');
slider.addEventListener('input', function () {
  // 当滑块被移动，执行操作
});

范围输入

要创建范围输入，请在 HTML 中添加两个 input 元素，并使用 data-js='mdl-slider' 属性标记该元素：

<label class="mdl-slider__label">Range</label>
<input type="range" min="0" max="100" value="30" class="mdl-slider__input" data-js="mdl-slider">
<input type="range" min="0" max="100" value="60" class="mdl-slider__input" data-js="mdl-slider">

然后，在您的脚本中初始化您的范围输入：

var ranges = document.querySelectorAll('[data-js="mdl-slider"]');
ranges[0].addEventListener('input', function () {
  // 当范围的第一个元素被移动，执行操作
});
ranges[1].addEventListener('input', function () {
  // 当范围的第二个元素被移动，执行操作
});

配置选项

您可以通过传递设置选项来自定义滑块控制器和范围输入。以下是可用的选项：

• isRange：是否创建范围输入。
• isDisabled：是否禁用输入。
• isTrackClickable：是否允许用户单击轨道以设置值。
• isFillClickable：是否允许用户单击填充以设置值。
• isRtl：右到左的布局。

以下代码创建一个配置为范围输入、禁用、不允许轨道和填充被单击，具有右到左布局的滑块控制器。

var options = {
  isRange: true,
  isDisabled: true,
  isTrackClickable: false,
  isFillClickable: false,
  isRtl: true
};
var slider = document.querySelector('[data-js="mdl-slider"]');
new MDLSlider(slider, options);

总结

材料设计精简版-微调器是一个小巧简单的库，可用于创建漂亮的滑块控制器和范围输入。它容易集成到 Web 应用程序中，并且提供了一组可以自定义外观和行为的选项，以适应所有类型的设计。