020-滑块

最新推荐文章于 2025-09-11 02:24:49 发布

原创最新推荐文章于 2025-09-11 02:24:49 发布 · 341 阅读

0 ·

CC 4.0 BY-SA版权

layui学习专栏收录该内容

32 篇文章

订阅专栏

本文详细介绍了 layui 滑块组件的使用，包括基础参数、自定义提示文本方法、数值改变的回调函数、实例方法以及动态改变滑块数值的方法。通过示例代码展示了如何渲染、设置提示文本、监听数值变化以及动态调整滑块值，提供了一个完整的垂直和水平滑块的示例。此外，还给出了实际运行的代码和效果图。

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

2. 模块加载名称：slider。

3. 基础参数

3.1. slider组件支持以下参数:

4. 自定义提示文本方法 - setTips

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

<script type="text/javascript">
	layui.use(['slider'], function() {
		var slider = layui.slider;

		// 渲染
	  	slider.render({
	    	elem: '#test2'  // 指向容器选择器
	    	,setTips: function(value){ //自定义提示文本
		    	return value + '%';
		  	}
	  	});
	});              
</script>

5. 数值改变的回调函数 - change

5.1. 在滑块数值被改变时触发。该回调非常重要, 可动态获得滑块当前的数值:

<script type="text/javascript">
	layui.use(['slider'], function() {
		var slider = layui.slider;

		// 渲染
	  	slider.render({
	    	elem: '#test2'  // 指向容器选择器
	    	,change: function(value){
		    	console.log(value[0]) //得到开始值
		    	console.log(value[1]) //得到结尾值
		  	}
	  	});
	});              
</script>

6. 实例方法

6.1. 执行slider实例时, 会返回一个当前实例的对象, 里面包含针对当前实例的方法和属性。

6.2. 语法: var ins = slider.render(options);

var ins = slider.render(options); // 获得实例对象
 
ins.config // 获得当前实例的配置项

7. 动态改变滑块数值 - setValue

7.1. 你可以通过外部方法动态改变滑块数值:

<script type="text/javascript">
	layui.use(['slider'], function() {
		var slider = layui.slider;

		// 渲染
	  	var ins = slider.render({
	    	elem: '#test1'  // 指向容器选择器
	  	});

	  	// 改变指定滑块实例的数值
	  	ins.setValue(20);

		// 渲染
	  	var ins1 = slider.render({
	    	elem: '#test2'  // 指向容器选择器
	    	,range: true // 是否开启滑块的范围拖拽, 若设为true, 则滑块将出现两个可拖拽的环
	  	});

	  	// 若滑块开启了范围range: true
	  	ins1.setValue(1, 0) // 设置开始值
		ins1.setValue(6, 1) // 设置结尾值
	});              
</script>

8. 例子

8.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>滑块 - layui</title>

		<link rel="stylesheet" href="layui/css/layui.css">
		<script type="text/javascript" src="layui/layui.js"></script>
	</head>
	<body>
		<div style="margin-top: 60px;" id="test1"></div> <br />
		<div id="test2"></div>

		<script type="text/javascript">
			layui.use(['slider'], function() {
  				var slider = layui.slider;

  				// 渲染
			  	var ins = slider.render({
			    	elem: '#test1'  // 指向容器选择器
			    	,type: 'vertical' // 滑块类型, 可选值有: default(水平滑块)、vertical(垂直滑块)
			    	,input: true // 是否显示输入框
			    	,height: 300 // 滑动条高度
			    	,theme: '#000000' // 主题颜色
			  	});

			  	// 改变指定滑块实例的数值
			  	ins.setValue(20);

				// 渲染
			  	var ins1 = slider.render({
			    	elem: '#test2'  // 指向容器选择器
			    	,type: 'default' // 滑块类型, 可选值有: default(水平滑块)、vertical(垂直滑块)
			    	,min: 0 // 滑动条最小值, 正整数, 默认为0
			    	,max: 100 // 滑动条最大值
			    	,range: true // 是否开启滑块的范围拖拽, 若设为true, 则滑块将出现两个可拖拽的环
			    	,value: [30, 60] // 滑块初始值
			    	,step: 10 // 拖动的步长
			    	,showstep: true // 是否显示间断点
			    	,tips: true // 是否显示文字提示
			    	,setTips: function(value){ //自定义提示文本
				    	return value + '%';
				  	}
			    	,change: function(value){
				    	console.log(value[0]) //得到开始值
				    	console.log(value[1]) //得到结尾值
				  	}
			  	});

			  	// 若滑块开启了范围range: true
			  	ins1.setValue(1, 0) // 设置开始值
				ins1.setValue(6, 1) // 设置结尾值
			});              
		</script>
	</body>
</html>

8.2. 效果图