npm 包 sunil-range-slider 使用教程

在前端开发中，处理数值范围是一项经常性任务。为了方便地提供给开发者一个可定制的可视化控件，sunil-range-slider 是一个非常优秀的 npm 包。它是一个易于使用的、高度可定制的滑块组件，它的使用方法简单明了。

安装 sunil-range-slider

使用 npm 进行安装：

--- ------- ------------------ ------

使用 sunil-range-slider

在你的 HTML 文件中，你需要引入以下依赖：

----- ---------------- ------------------------------------------------------------------ --
------- --------------------------------------------------------------------------

然后，你可以在页面中添加一个 div 元素用于渲染滑块：

---- -------------------------

接下来，你需要在你的 JavaScript 文件中初始化 sunil-range-slider：

--- ------ - --- -------------
  ------- ----------------
  ------- -
    ---- --
    ---- ----
    ----- --
    ----- ---
    --- --
  --
  ---------- -
    -------- -------- -------- ------- ---
    --------- -------- -------- ------- ---
    --------- -------- -------- ------- ---
    ------ -------- -------- ------- --
  --
  -------- -
    ----- ---------
    ------------ -------------
    ---------- ------
    --------- -----
    ---- -----
    ------ -----
    ----- -
  -
---

这里，我们使用 new RangeSlider() 创建一个新的对象，并传入 target、values、callbacks、options 这 4 个参数。它们各自指定了：

  • target: 渲染控件的目标元素 id
  • values: 初始值
    • min：可选择最小值
    • max: 可选择最大值
    • step: 步长
    • from: 左滑块初始值
    • to: 右滑块初始值（只在 type 为 double 时可用）
  • callbacks: 事件回调函数，分别在拖动开始、拖动中、拖动结束和数值变化后调用
  • options: 配置项
    • type: 可选值为 'single' 和 'double'，单滑块或双滑块
    • orientation: 可选值为 'horizontal' 和 'vertical'，滑块方向
    • direction: 可选值为 'ltr' 和 'rtl'，左到右或右到左
    • tooltips: 是否显示数值提示
    • bar: 是否绘制范围条（只在 type 为 double 时可用）
    • range: 是否选择数值范围（只在 type 为 double 时可用）
    • step: 步长

事件回调

sunil-range-slider 提供了 4 个事件回调函数，它们可以用于响应以下行为：

  • onStart: 当拖动开始时调用
  • onChange: 当拖动进行时调用
  • onUpdate: 当滑块数值更新时调用
  • onEnd: 当拖动结束时调用

每个回调函数都可以传入两个参数：

  • values: 当前滑块数值，格式如下
-
  ----- --- -- -------
  ---- -- -- ---------- ---- - ------ ----
-
  • handle: 拖动操作的滑块，值为 'from' 或 'to'（只在 type 为 double 时用到）

例如：

-------- -------- -------- ------- -
  ----------------- --------- ------- --------------------
-

高度可定制

在 sunil-range-slider 中，你可以定制所有的样式效果，包括颜色、圆角大小、背景、间距等等。例如，你可以使用以下 CSS 修改滑块的颜色：

-- --- --
------- -
  ----------- ----
-
-- ----- --
--------- -
  ----------- --------- -- -- -----
-
-- -- --
----------------- -
  ----------- ----
-

示例代码

完整的示例代码：（你可以使用 npm i && npm start 运行此示例）

--------- -----
------
------
  ----- ----------------
  ------------------------- ------------
  ----- ---------------- ------------------------------------------------------------------ --
  ------ ----------------
    ---- -
      -------- -----
    -
    ----------- -
      ----------- -----
      -------------- ----
      ------ -----
      ---------- -----
      ------------ ----
      -------- --- ----
      ----------- -------
    -
    ---------- -
      ----------- -----
      ------- -----
      -------------- ----
      ----------- - --- --- ------- -- -- -----
      ------- -----
      ------ -----
    -
    ----------------------- -
      ----------- -----
    -
    ----------------- -
      ----------- -----
      -------------- ----
      -------- ---
      -------- ------
      ------- -----
      ----- ----
      ------------ -----
      ----------- -----
      --------- ---------
      ---- ----
      ------ -----
    -
    ------- -
      ----------- -----
      -------------- -----
      ------- ----
      ----------- -----
    -
    --------- -
      ----------- -----
      -------------- -----
      ------- ----
      ---- -----
    -
  --------
-------
------
  ---- -------------------------
  ------- --------------------------------------------------------------------------
  ------- -----------------------
    --- ------ - --- -------------
      ------- ----------------
      ------- -
        ---- --
        ---- ----
        ----- --
        ----- ---
        --- --
      --
      ---------- -
        -------- -------- -------- ------- -
          ----------------- --------- ------- --------------------
        --
        --------- -------- -------- ------- -
          ----------------- --------- ------- --------------------
        --
        --------- -------- -------- ------- -
          ----------------- --------- ------ --------------------
        --
        ------ -------- -------- ------- -
          ----------------- --------- ------- --------------------
        -
      --
      -------- -
        ----- ---------
        ------------ -------------
        ---------- ------
        --------- -----
        ---- -----
        ------ -----
        ----- -
      -
    ---
  ---------
-------
-------

总之，sunil-range-slider 是一个非常优秀的 npm 包，它的使用方法简单明了，非常适合前端范围选择功能场景。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600557e781e8991b448d4f81

阅读全文

猜你喜欢

  • npm 包 angular-lazy-img 使用教程

    什么是 angular-lazy-img angular-lazy-img 是一个 AngularJS 指令，用于实现页面图片的懒加载。懒加载是指在页面渲染完成后，只对当前可视区域内的图片进行加载，减...

    2 年前
  • npm 包 furry-image 使用教程

    在 Web 前端开发中，图片处理是常常涉及的一个技术难点。furry-image 是一个基于 Node.js 的 npm 包，可以帮助开发者在前端中快速地完成图片的边角处理。

    2 年前
  • npm 包 pre-charts 使用教程

    npm 包 pre-charts 使用教程 简介 pre-charts 是一个简单、易用的 JavaScript 绘图库，可以帮助前端开发者快速创建图表，包括折线图、柱状图、饼图等常见类型。

    2 年前
  • NPM 包 uws-old 使用教程

    什么是 uws-old uws-old 是一个 Node.js 的 C++ 插件，它提供了 WebSocket 的实现。这个插件的原名称叫做 "uWebSockets.js"，但是因为历史原因它已经被...

    2 年前
  • npm 包 @pegakit/pegakit 使用教程

    @pegakit/pegakit 是一个前端开发常用的 npm 包。这个包提供了很多有用的组件和工具，能够帮助我们快速构建前端项目并提高开发效率。 安装 使用 npm 进行安装： --- ------...

    2 年前
  • npm 包 cordova-plugin-icon-alipay 使用教程

    简介 cordova-plugin-icon-alipay 是一个用于在支付宝小程序中设置应用图标的 Cordova 插件。使用该插件，可以为支付宝小程序添加自定义图标，使它更具吸引力和个性化。

    2 年前
  • npm 包 module_compress 使用教程

    前言 在前端开发中，我们经常会遇到需要对 Javascript 代码进行压缩的情况。此时，我们可以使用一些第三方的工具来实现代码的压缩。其中，module_compress 是一个非常优秀的压缩工具，...

    2 年前
  • npm 包 node-sciencedirect 使用教程

    简介 node-sciencedirect 是一个 Node.js 的包，可以用于从 ScienceDirect 数据库中获取文章元数据或全文。本文将介绍如何使用 node-sciencedirect...

    2 年前
  • npm 包 opentype-svg-loader 使用教程

    前言 opentype-svg-loader 是一个能够将 OpenType 字体(.otf, .ttf) 转化为可用的 SVG 代码的 webpack loader。

    2 年前
  • npm 包 React-withmap 使用教程

    React-withmap 是一个基于 React 的地图组件库，它使用了高德地图作为底层地图服务，提供了常用的地图功能以及可定制的 UI 样式，使得在 React 应用中嵌入地图变得十分简单。

    2 年前
  • npm 包 vuex-objectmodel 使用教程

    简介 vuex-objectmodel 是一个基于 Vuex 的数据模型解决方案，它可以帮助我们更好地管理前端应用中的数据。使用 vuex-objectmodel 可以很方便地定义数据模型，并在模型中...

    2 年前
  • npm包thor-rx的使用教程

    在前端开发过程中，常常需要使用各种npm包来协助开发工作。其中，thor-rx是一种流行的npm包，它提供了许多方便的API，可以帮助开发者更轻松地进行RxJS编程。

    2 年前
  • npm 包 ultimate-line-chart 使用教程

    简介 ultimate-line-chart 是一款优秀的前端可视化库，针对线形图进行了优化。它提供了多种功能，包括线条颜色、线宽、数据值标注等，可以满足大多数线形图的需求。

    2 年前
  • npm 包 material-components-mithril 使用教程

    近年来，Mithril 成为前端界备受瞩目的 JS 框架之一。该框架提供了又轻量又快速的路由，渲染和数据流管理等功能。另一方面，Material Design 提供了现代化的设计语言来创建现代化的 W...

    2 年前
  • npm 包 gravatar-node-js 使用教程

    介绍 Gravatar 是一种全球通用的头像服务，用户可以在 Gravatar 官网上设置头像，然后在各个支持 Gravatar 的网站上使用该头像。gravatar-node-js 是一个 Node...

    2 年前
  • npm 包 geodash.js 使用教程

    在现代Web开发中，前端技术正在日新月异地发展，为我们带来了更多的助力和可能。而npm作为现代的依赖管理工具，为众多的前端开发者提供了一个极为便捷的方式来获取、分享和使用各种前端组件和库。

    2 年前
  • npm 包 webpack-graphql-server 使用教程

    随着前端技术的不断发展，前端也开始越来越依赖后端的能力，如 GraphQL 这种前端与后端协同的技术已经成为趋势。而 webpack-graphql-server 就是一款让我们可以更加方便的在前端使...

    2 年前
  • npm 包 map-pointer 使用教程

    1. 简介 在前端开发中，有时我们需要在地图上标记一些点，比如位置信息或特殊地点。而 map-pointer 正好是一个可以帮助我们实现这一功能的 npm 包。 map-pointer 是一款轻量级的...

    2 年前
  • npm包chr-vue-instance使用教程

    在前端开发中，Vue.js是目前最受欢迎的JavaScript框架之一。在Vue.js中，组件化是非常重要的概念。但是，当我们在处理父子组件通信问题时，有时候我们需要获取到Vue实例，但是Vue实例并...

    2 年前
  • npm 包 inject-main 使用教程

    介绍 在前端开发中，我们经常会遇到需要动态注入 HTML 或者 JavaScript 文件的情况，例如添加统计代码、广告、第三方组件等等。inject-main 就是为了解决这个问题而生的一个 npm...

    2 年前

相关推荐

    暂无文章