滑块文档 - layui.slider

作为一个拖拽式的交互性组件，滑块往往能给产品带来更好的操作体验。layui 深以为然，slider 模块包含了你能想到的大部分功能，尽管它可以作为一个独立的个体，但很多时候它往往会出现 form 元素中，想象一下吧。

模块加载名称：slider

注意：slider 为 layui 2.4.0 新增模块

使用

通过对 slider 模块的使用，你可以在页面构建出可拖动的滑动元素，如下是一个最基本的用法：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>滑块</title>
  6.   <link rel="stylesheet" href="../src/css/layui.css">
  7. </head>
  8. <body>
  9. <div id="slideTest1"></div>
  10. <script src="../src/layui.js"></script>
  11. <script>
  12. layui.use('slider', function(){
  13.   var slider = layui.slider;
  14.  
  15.   //渲染
  16.   slider.render({
  17.     elem: '#slideTest1'  //绑定元素
  18.   });
  19. });
  20. </script>
  21. </body>
  22. </html>
  23.

基础参数

slider 组件支持以下参数

参数选项说明类型默认值
elem指向容器选择器string/object-
type滑块类型，可选值有：default（水平滑块）、vertical（垂直滑块）stringdefault
min滑动条最小值，正整数，默认为 0number0
max滑动条最大值number100
range是否开启滑块的范围拖拽，若设为 true，则滑块将出现两个可拖拽的环booleanfalse
value滑块初始值，默认为数字，若开启了滑块为范围拖拽（即 range: true），则需赋值数组，异表示开始和结尾的区间，如：value: [30, 60]number/Array0
step拖动的步长number1
showstep是否显示间断点booleanfalse
tips是否显示文字提示booleantrue
input是否显示输入框（注意：若 range 参数为 true 则强制无效）
点击输入框的上下按钮，以及输入任意数字后回车或失去焦点，均可动态改变滑块		booleanfalse
height滑动条高度，需配合 type:”vertical” 参数使用number200
disabled是否将滑块禁用拖拽booleanfalse
theme主题颜色，以便用在不同的主题风格下string#009688

自定义提示文本

当鼠标放在圆点和滑块拖拽时均会触发提示层。其默认显示的文本是它的对应数值，你也可以自定义提示内容：

  1. slider.render({
  2.   elem: '#slideTest1'
  3.   ,setTips: function(value){ //自定义提示文本
  4.     return value + '%';
  5.   }
  6. });
  7.

数值改变的回调

在滑块数值被改变时触发。该回调非常重要，可动态获得滑块当前的数值。你可以将得到的数值，赋值给隐藏域，或者进行一些其它操作。

  1. //当滑块为普通模式，回调返回的 value 是一个数值
  2. slider.render({
  3.   elem: '#slideTest1'
  4.   ,change: function(value){
  5.     console.log(value) //动态获取滑块数值
  6.     //do something
  7.   }
  8. });
  9.  
  10. //当滑块为范围模式，回调返回的 value 是一个数组，包含开始和结尾
  11. slider.render({
  12.   elem: '#slideTest1'
  13.   ,range: true
  14.   ,change: function(value){
  15.     console.log(value[0]) //得到开始值
  16.     console.log(value[1]) //得到结尾值
  17.     //do something
  18.   }
  19. });
  20.

实例方法

执行 slider 实例时，会返回一个当前实例的对象，里面包含针对当前实例的方法和属性。
语法：var ins1 = slider.render(options);

  1. var ins1 = slider.render(options); //获得实例对象
  2.  
  3. ins1.config //获得当前实例的配置项
  4. ins1.setValue(nums); //动态给滑块赋值
  5.

动态改变滑块数值

你可以通过外部方法动态改变滑块数值，如：

  1. var ins1 = slider.render({
  2.   elem: '#test1'
  3.   //…
  4. });      
  5.  
  6. //改变指定滑块实例的数值
  7. ins1.setValue(20)
  8.  
  9. //若滑块开启了范围（range: true）
  10. ins1.setValue(20, 0) //设置开始值
  11. ins1.setValue(60, 1) //设置结尾值
  12.

结语

layui.slider 可以大幅度提升你 Web 应用中的很多操作体验，可尽情发挥。

layui - 用心与你沟通