前言
像许多前端开发人员一样，我们都需要使用一些常见功能，比如滑块控件（Slider Control）。在前端领域中，有一些优秀的库和框架可以快速地实现这些功能。其中 @npm-polymer/iron-range-behavior 是一个优秀的 npm 包，它提供了一个可扩展的、支持自定义样式的滑块控件。本文将详细介绍如何使用该 npm 包实现一个滑块控件。
安装 npm 包 @npm-polymer/iron-range-behavior
要使用该 npm 包，必须先使用 npm 进行安装。打开终端并输入下面的命令：
npm install @npm-polymer/iron-range-behavior
这将安装 @npm-polymer/iron-range-behavior 包和其所有的依赖项。
使用 @npm-polymer/iron-range-behavior 创建滑块控件
@npm-polymer/iron-range-behavior 可以通过 Polymer.dom() 方法来实现一个滑块控件。 首先，在 HTML 文件中添加以下代码：
-- -------------------- ---- -------
----------
-------
------------- -
------ -----
------- ----
-------------- ----
----------------- --------
--------- ---------
--------- -------
-
------------- --------- -
------ ---------- - -----------------------------------------
------- ----
----------------- -------- ----------------- ---------- ----- --
--------- ---------
---- --
----- ----
-------------- ----
-
------------- --------- -
------ ---------- - -----------------------------------------
------- ----
----------------- -------- ----------------- ---------- ----- --
--------- ---------
---- --
----- ------------ - -----
-------------- ----
-
------------- --------- -
------ ---------- - -----------------------------------------
------- ----
----------------- -------- ----------------- ---------- ----- --
--------- ---------
---- --
----- ------------ - -----
-------------- ----
-
------------- ------- -
------ -----
------- -----
----------------- -----
-------------- ----
------- ----- --- -------- ----------------- ------ ----- --
--------- ---------
---- ----
---------- --------------- ------
-
------------- ---------------- -
------- ---------
------- --------------
------- -----------------
-
--------
---- ---------------------
---- -----------------------
---- -----------------------
---- -----------------------
---- ---------------------
------
-----------上面的代码中定义了以下类：
- .range-slider：定义了滑块控件的样式，如宽度、高度、边框半径、背景颜色、位置等。
- .divisor1、.divisor2 和 .divisor3：定义了三个分割线的样式。
- .handle：定义了控制手柄的样式，如宽度、高度、背景颜色、边框半径、边框颜色、位置等。
- .handle.dragging：当拖动手柄时添加此类，以便更改光标的样式。
接下来，需要在 JS 文件中添加以下代码：
-- -------------------- ---- -------
------ - ----- -------------- - ---- --------------------------------------
------ - ----------------- - ---- ----------------------------------------------------------
------ --------------------------------------------------------
----- ----- ------- -------------- -
------ --- ---------- -
------ ---- -
-------
------------------ -
-------- -----
--------------- ----
-
----- -
----- --
------- ----
-
--------
---- ------------- ------------
---- -------------
---- -------------------- -----------------------
------
------
--
-
------ --- ------------ -
------ -
----------- -
----- -------
------ ---
------- ----
-
--
-
--------------------- -
--------------- - -------------------
-
------- -
--------------
----- ----------- - -------------------
--------------------- - --------------------
--------------------- - -----
---------------------- -----
---------------------- ---
----------------------- ---
------------------------ -----------------
--------------------------------------------- --------------------------------
-
-
------------------------------- -------PolimerElement 是 Polymer 提供的基类。通过使用模板字符串，我们可以更容易地创建 HTML 内容。在 properties() 方法中，我们定义了要在应用程序中使用的属性。这些属性将被包含在元素的属性视图中，并且可以通过上面的代码中的 rangeValue 属性进行访问。
在 _handleChanged() 方法中，我们通过事件对象的 detail.value 属性来获取当前值。我们使用 notify 属性的值将更改通知到元素的属性视图。当值更改时，Polymer 会自动更新模板中绑定的数据。
在 ready() 方法中，我们使用 Polymer 的机制来将控件与 HTML 中的 div 相关联。我们还逐一设置了其他属性，例如最小和最大值、步长和当前值。最后，我们使用 addEventListener() 方法来监听“range-changed”事件，以便在值更改时执行自定义代码。
总结
使用 @npm-polymer/iron-range-behavior 包创建滑块控件是一件非常简单的事情。本文介绍了如何安装和使用该 npm 包，并提供了详细的代码示例。如果你想深入了解该 npm 包的更多详细信息，建议你去查看官方文档。学习并掌握这个能够使你更加高效地开发前端网站，并为你的代码提高可重复性和扩展性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ff281e8991b448ddb4d