layui/docs/slider/index.md

title, toc

title	toc
滑块组件 slider	true

滑块组件

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

示例

<style> .demo-slider-container .layui-code-item-preview{padding: 32px;} .demo-slider-container .layui-code-item-preview > div{margin: 24px 0;} </style>

{{- d.include("/slider/detail/demo.md") }}

API

API	描述
var slider = layui.slider	获得 slider 模块。
基础接口 2.12+	该组件由 component 构建，因此继承其提供的基础接口。
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) // 设置结尾值

属性

{{- d.include("/slider/detail/options.md") }}