滑块组件

滑块组件 slider 是一个拖拽选值的交互性组件，常与 form 元素结合使用。

示例

  <div id="ID-slider-demo"></div>
<!-- import layui -->
<script>
layui.use(function(){
  var slider = layui.slider;
  // 渲染
  slider.render({
    elem: '#ID-slider-demo'
  });
});
</script>

定义初始值

  <div id="ID-slider-demo-value"></div>
<!-- import layui -->
<script>
layui.use(function(){
  var slider = layui.slider;
  // 渲染
  slider.render({
    elem: '#ID-slider-demo-value',
    value: 20 //初始值
  });
});
</script>

设置最大和最小值

  <div id="ID-slider-demo-maxmin"></div>
<!-- import layui -->
<script>
layui.use(function(){
  var slider = layui.slider;
  // 渲染
  slider.render({
    elem: '#ID-slider-demo-maxmin',
    min: 20, // 最小值
    max: 50 // 最大值
  });
});
</script>

设置步长

  <div id="ID-slider-demo-step-1"></div>
<hr class="ws-space-16">
<div id="ID-slider-demo-step-2"></div>
<!-- import layui -->
<script>
layui.use(function(){
  var slider = layui.slider;
  // 渲染
  slider.render({
    elem: '#ID-slider-demo-step-1',
    step: 10 // 步长
  });
  slider.render({
    elem: '#ID-slider-demo-step-2',
    step: 10, // 步长
    showstep: true // 开启间隔点
  });
});
</script>

设置提示文本

  <div id="ID-slider-demo-setTips-1"></div>
<hr class="ws-space-16">
<div id="ID-slider-demo-setTips-2"></div>
<div id="ID-slider-demo-setTips-result"></div>
<hr class="ws-space-16">
<hr class="ws-space-16">
<div id="ID-slider-demo-setTips-tipsAlways"></div>
<!-- import layui -->
<script>
layui.use(function(){
  var slider = layui.slider;
  var $ = layui.$;
  // 渲染
  slider.render({
    elem: '#ID-slider-demo-setTips-1',
    min: 20,
    max: 1000,
    setTips: function(value){ // 自定义提示文本
     return value + 'GB';
    }
  });
  slider.render({
    elem: '#ID-slider-demo-setTips-2',
    tips: false, // 关闭默认提示层
    change: function(value){
      $('#ID-slider-demo-setTips-result').html('当前数值：'+ value);
    }
  });
  slider.render({
    elem: '#ID-slider-demo-setTips-tipsAlways',
    tips: true, // 开启提示文本
    tipsAlways: true // 开启始终显示提示文本
  });
});
</script>

开启输入框

  <div id="ID-slider-demo-input"></div>
<!-- import layui -->
<script>
layui.use(function(){
  var slider = layui.slider;
  // 渲染
  slider.render({
    elem: '#ID-slider-demo-input',
    input: true //输入框
  });
});
</script>

开启范围选择

  <div id="ID-slider-demo-range-1"></div>
<hr class="ws-space-16">
<div id="ID-slider-demo-range-2"></div>
<!-- import layui -->
<script>
layui.use(function(){
  var slider = layui.slider;
  var layer = layui.layer;
  // 渲染
  slider.render({
    elem: '#ID-slider-demo-range-1',
    value: 40, // 初始值
    range: true, // 范围选择
    done: function(vals){
      layer.msg('开始值：'+ vals[0] + '、结尾值：'+ vals[1]);
    }
  });
  slider.render({
    elem: '#ID-slider-demo-range-2',
    value: [30, 60], // 初始值
    range: true // 范围选择
  });
});
</script>

垂直滑块

  <br><br>
<div class="layui-inline" style="margin-right: 32px;" id="ID-slider-demo-vertical-1"></div>
<div class="layui-inline" style="margin-right: 32px;" id="ID-slider-demo-vertical-2"></div>
<div class="layui-inline" style="margin-right: 32px;" id="ID-slider-demo-vertical-3"></div>
<div class="layui-inline" id="ID-slider-demo-vertical-4"></div>
<!-- import layui -->
<script>
layui.use(function(){
  var slider = layui.slider;
  // 渲染
  slider.render({
    elem: '#ID-slider-demo-vertical-1',
    type: 'vertical' // 垂直滑块
  });
  slider.render({
    elem: '#ID-slider-demo-vertical-2',
    value: 30,
    type: 'vertical' // 垂直滑块
  });
  slider.render({
    elem: '#ID-slider-demo-vertical-3',
    value: 50,
    range: true, // 范围选择
    type: 'vertical' // 垂直滑块
  });
  slider.render({
    elem: '#ID-slider-demo-vertical-4',
    value: 80,
    input: true, // 输入框
    type: 'vertical' // 垂直滑块
  });
});
</script>

自定义主题色

  <div id="ID-slider-demo-theme-1"></div>
<hr class="ws-space-16">
<div id="ID-slider-demo-theme-2"></div>
<hr class="ws-space-16">
<div id="ID-slider-demo-theme-3"></div>
<!-- import layui -->
<script>
layui.use(function(){
  var slider = layui.slider;
  // 渲染
  slider.render({
    elem: '#ID-slider-demo-theme-1',
    theme: '#1E9FFF' // 主题色
  });
  slider.render({
    elem: '#ID-slider-demo-theme-2',
    value: 50,
    theme: '#16b777' // 主题色
  });
  slider.render({
    elem: '#ID-slider-demo-theme-3',
    value: [30, 70],
    range: true,
    theme: '#FF5722' // 主题色
  });
});
</script>

禁用滑块

  <div id="ID-slider-demo-disabled"></div>
<!-- import layui -->
<script>
layui.use(function(){
  var slider = layui.slider;
  // 渲染
  slider.render({
    elem: '#ID-slider-demo-disabled',
    value: 35,
    disabled: true // 禁用滑块
  });
});
</script>

API

API	描述
var slider = layui.slider	获得 `slider` 模块。
var inst = slider.render(options)	slider 组件渲染，核心方法。
inst.setValue(value)	设置滑块值
inst.config	获得当前实例的属性配置项

渲染

slider.render(options);

参数 options : 基础属性配置项。#详见属性
注 ^2.8+ : 除 elem 属性外，其他基础属性也可以直接写在元素的 lay-options="{}" 属性中。

<div id="ID-test-slider"></div>
<div class="class-test-slider" lay-options="{value: 50}"></div>
<div class="class-test-slider" lay-options="{value: 80}"></div>
 
<!-- import layui -->
<script>
layui.use(function(){
  var slider = layui.slider;
  // 单个渲染
  slider.render({
    elem: '#ID-test-slider'
  });
  // 批量渲染
  slider.render({
    elem: '.class-test-slider'
  });
});
</script>

该方法返回一个实例对象，包含操作当前实例的相关方法成员。

var inst = slider.render(options);
console.log(inst); // 得到当前实例对象

设置滑块值

inst.setValue(value, index)

参数 value : 要设置的滑块数值
参数 index : 滑块所在的区间开始值或结尾值的索引，开始值：0 ; 结尾值：1

var slider = layui.slider;
 
// 渲染
var inst = slider.render({
  elem: '#id'
  // …
});      
 
// 设置滑块值
inst.setValue(20);
 
// 若滑块开启了范围，即： `range: true`
ins1.setValue(20, 0) // 设置开始值
ins1.setValue(60, 1) // 设置结尾值

属性

属性名	描述	类型	默认值
elem	绑定元素选择器或 DOM 对象	string/DOM	-
type	滑块类型，可选值有： `default` 水平滑块（默认） `vertical`垂直滑块	string	`default`
value	滑块初始值。默认可直接设置数值，如： `value: 50` 若滑块开启 `range: true` 区间选择，则值为数组，异表示开始和结尾的区间，如： `value: [30, 60]`	number array	-
range	是否开启滑块的区间选择。若开启，则滑块将出现两个可拖拽的点。	boolean	`false`
min	滑块的最小值	number	`0`
max	滑块的最大值	number	`100`
step	滑块单次拖动的步长	number	`1`
showstep	是否显示间断点	boolean	`false`
tips	鼠标移入当前圆点，是否显示当前值	boolean	`true`
tipsAlways ^2.9.3+	是否始终显示提示文本，要开启此功能，tips 必须设置为 `true` 才能生效	boolean	`false`
input	是否显示滑块的数字输入框。注：若设置 `range: true` 则该属性强制无效。	boolean	`false`
height	滑动条高度。必须设置 `type: 'vertical'` 属性，即垂直滑块时有效。	number	`200`
theme	滑块的主题色。	string	-
disabled	是否禁用滑块	boolean	`false`
setTips	滑块拖拽时设置提示文本的回调函数。并返回当前的 `value` 参数。用法详见：#设置提示文本
回调函数
change	滑块数值发生改变的回调函数。并返回当前的 `value` 参数。 `slider.render({ elem: '#id', change: function(value){ console.log(value) // 滑块当前值 // do something } });` 一般可在该回调中将 `value` 同步给表单隐藏域，或者进行一些其它操作。
done ^2.8+	滑块拖拽完毕的回调函数。并返回当前的 `value` 参数。滑块拖动过程中不会触发。 `slider.render({ elem: '#id', done: function(value){ console.log(value) // 滑块当前值 // do something } });` 若需将 `value` 异步发送给后端，一般采用 `done` 回调，而非 `change` 回调。