EasyUI jQuery 滑块小部件

EasyUI 是一个 HTML5 框架，用于使用基于 jQuery、React、Angular 和 Vue 技术的用户界面组件。它有助于为交互式 Web 和移动应用程序构建功能，为开发人员节省大量时间。

在本文中，我们将学习如何使用 jQuery EasyUI 设计滑块。 Slider 小部件使用户能够从有限范围内选择一个数值。滑块的类型和范围可以在滑块的选项中自定义。

EasyUI for jQuery 下载：

https://www.jeasyui.com/download/index.php

句法：

特性：

• 宽度：它是滑块的宽度。
• height：滑块的高度。
• mode：表示滑块的类型。
• reversed：当这个属性设置为true时，最小值和最大值将被颠倒。
• showTip：定义是否显示提示信息。
• disabled：定义是否禁用滑块。
• range：定义是否显示范围滑块。
• value：它定义了默认值。
• min：它定义了最小允许值。
• max：它定义了最大允许值。
• step：它定义滑块增加或减少的值。
• 规则：它定义了滑块旁边的标签。
• tipFormatter：这是一个格式化滑块值的函数。
• 转换器：它是转换器函数，允许用户确定如何将值转换为滑块位置。

事件：

• onChange：当字段值改变时触发。
• onSlideStart：当开始拖动滑块时触发。
• onSlideEnd：当滑块结束拖动时触发。
• onComplete：当用户更改滑块值时触发。

方法：

• 选项：它返回滑块选项。
• destroy：它销毁滑块对象。
• 调整大小：它设置滑块大小。
• getValue：它获取滑块值。
• getValues：它获取滑块值数组。
• setValue：它设置滑块值。
• setValues：它以数组的形式设置滑块值。
• clear：它清除滑块值。
• 重置：它重置滑块值。
• enable：启用滑块组件。
• disable：禁用滑块组件。

CDN 链接：首先，添加项目所需的 jQuery Easy UI 脚本。

示例 1：

HTML

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  


  GeeksforGeeks
  EasyUI jQuery slider widget
  
  
  

输出：

示例 2：

HTML

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  


  
  GeeksforGeeks
  EasyUI jQuery slider widget
  
  
      
    
    
  
  
  
  
    // Initialize the EasyUI slider
    $('#gfg').slider({
      height: "250px",
      mode: 'v',
      min: 0,
      max: 9,
      showTip: true
    });
  

输出：

参考： https : //www.jeasyui.com/documentation/slider。 PHP