当前博客：41-快码FOF中文编程layui教学-组件：滑块

195 次浏览【转载需注明来源】

收藏内容 (0) (0)

博客作者：【qiang】

个性签名：请输入个性签名___________

滑块在设置身高，体重，音量，进度等，可以一目了然的知道数量的变化。

虽然数据框有滑块类型，但是不太美观，功能也不是很多，需要后期的优化才行。

而layui的滑块组件可以设置数据框，提示文字，垂直展示，还可以更改主题，感觉功能在大多数情况都应该够用了。

layui滑块的基础代码示例：

<区块 id="演示1"></区块>
<脚本>
	新建对象 lay_滑块({
		[lay_滑块.配置.绑定元素]: "#演示1",
		[lay_滑块.配置.初始值]: 10,
		[lay_滑块.配置.输入框]: 真,
		[lay_滑块.配置.设置提示]: 定义函数 (值) {
			//自定义提示文本
			返回 值 + "%";
		},
	});
</脚本>

代码效果展示：

如果不想要右边的数据框，可以把输入框参数删除掉。

完整滑块参数代码示例：

<区块 id="演示2"></区块>
<脚本>
	局部变量 滑块2 = 新建对象 lay_滑块({
		[lay_滑块.配置.绑定元素]: "#演示2",
		[lay_滑块.配置.类型]: lay_滑块.类型.垂直,
		[lay_滑块.配置.最小值]: 0,
		[lay_滑块.配置.最大值]: 100,
		[lay_滑块.配置.范围]: 真,
		[lay_滑块.配置.初始值]: [0, 20],
		[lay_滑块.配置.步长]: 5,
		[lay_滑块.配置.显示步长]: 真,
		[lay_滑块.配置.提示]: 真,
		[lay_滑块.配置.输入框]: 假,
		[lay_滑块.配置.高度]: 200,
		[lay_滑块.配置.主题]: "#0cc",
		[lay_滑块.配置.设置提示]: 定义函数 (值) {
			返回 值 + "%";
		},
		[lay_滑块.配置.改变]: 定义函数 (值) {
			lay_弹出层.消息框(值[0] + "%  -  " + 值[1] + "%");
		},
	});
</脚本>

代码效果展示：