简介
@ouracademy/range 是一个开源的 JavaScript 库，它提供了一组便捷的 API，用于在页面上创建拥有拖拽、选择、删除等功能的区间选择器。它们可以被延伸、缩放、合并和移动。这种范围选择器在数据可视化、日程安排、时间表制作等领域具有广泛应用。
安装
使用 npm 或 yarn 安装：
npm install @ouracademy/range
或
yarn add @ouracademy/range
快速开始
要使用 @ouracademy/range，您需要创建一个包含容器元素、引入库的脚本和样式表的 HTML 文件。让我们从这三步开始。
第一步：HTML
为了让 @ouracademy/range 工作，我们需要一个容器元素来放置选择器。我们可以使用任何类型的元素作为容器，但对于本教程，我们将使用 <div>。将以下代码添加到您的 HTML 文件中：
<div id="range-container"></div>
第二步：引入库
接下来，我们需要在 HTML 文件中引入 @ouracademy/range 包的 JavaScript 和 CSS 文件。将以下代码添加到您的 HTML 文件的 <head> 标记中：
<link rel="stylesheet" href="node_modules/@ouracademy/range/dist/index.css"/> <script src="node_modules/@ouracademy/range/dist/index.js"></script>
第三步：添加脚本
最后，我们需要实例化 Range 对象并将其附加到容器元素中。将以下代码添加到您的 HTML 文件的 <script> 标记中：
<script>
const rangeContainer = document.getElementById('range-container')
const range = new Range(rangeContainer)
</script>此时，您应该可以在容器元素上看到一个功能完整的范围选择器了。
使用手册
现在我们已经学会了如何在页面上添加 @ouracademy/range，让我们看看如何使用它的一些核心功能。
选择范围
您可以使用范围选择器选择多个范围。要开始选择，单击范围选择器中的起始点，并向后拖动以选择您感兴趣的区域。当您完成选择时，请在选择的最后一个点上释放您的鼠标。
改变范围大小
要调整范围的大小，您可以拖动范围选择器的任一侧。单击选择器上的端点，并向左或向右拖动，以调整左侧或右侧的大小。
移动范围
您可以通过单击范围选择器上的一条线，并将选择器拖动到新位置来移动范围选择器。
合并/分离范围
您可以通过拖动范围选择器的左侧或右侧来合并或分离范围。当您将两个侧点拖动到彼此或附近时，它们将合并为单个范围选择器；相反，当您将侧点分开时，它们将分成两个独立的范围选择器。
删除范围
要删除特定区域，您可以单击范围选择器上的 "x" 按钮。当您单击 "x" 按钮时，范围选择器中的该特定范围将被删除。
示例代码
以下是一个完整的示例，展示了如何在页面上使用范围选择器，并选中，调整大小和删除一个特定的范围。
-- -------------------- ---- -------
--------- -----
------
------
----- -----------------
------------------------ ------------
----- ---------------- ------------------------------------------------------
-------
---------------- -
------- ------
------- --- ----- ------
------- -----
-
--------
-------
------
--------------------- ---------
---- ---------------------------
-----
------- ------------------------------
------- -------------------------------
------
------- ------------------------------------------------------------
--------
----- -------------- - ------------------------------------------
----- ----- - --- ---------------------
-------- -------- -
--------------------- ----
-
-------- --------- -
---------------
-
---------
-------
-------结论
在本教程中，我们学习了如何使用 @ouracademy/range 包在页面上创建范围选择器，并使用一些核心功能来操作选择器。如果您正在寻找一种灵活的范围选择器，或者需要在您的项目中添加对地图、日历或时间表的范围选择支持，那么 @ouracademy/range 可以为您提供一种简单的解决方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067380890c4f72775841f4