layui框架学习（29：滑块模块）

Layui中的滑块模块slider支持用户通过移动滑块从一系列的值中进行选择，比起手输数值，使用滑块的视觉效果更直观。slider滑块模块的基本用法及效果如下所示：

    <div id="slideR" style="margin: 45px 30px; display: inline-block;"></div><div id="slideG" style="margin: 45px 30px; display: inline-block;"></div><div id="slideB" style="margin: 45px 30px; display: inline-block;"></div><script>layui.use(['slider','layer'], function(){var slider = layui.slider;var layer = layui.layer;var $ = layui.jquery;slider.render({elem: '#slideR',min:0,max:255,type:'vertical',theme:'#ff0000',value:125,input:true});slider.render({elem: '#slideG',min:0,max:255,type:'vertical',theme:'#00ff00',value:125,input:true});slider.render({elem: '#slideB',min:0,max:255,type:'vertical',theme:'#0000ff',value:125,input:true});});</script>

基础参数type设置滑块的方向，默认值为default，及水平滑块，值为vertical时为垂直滑块。

基础参数min/max设置滑块的最大/最小值，滑块的值只能位于最大/最小值之间。
基础参数step设置滑块的步长，即每次移动的距离。
基础参数range设置是否开启范围拖拽，如果开启，则滑块的值为范围值。range参数的效果如下：

基础参数value设置滑块的初始值，如果range为false，则value为单个值，如果range为true，则value为数组，数组第一个值为范围值的开始值，第二个值为范围值的结束值。
基础参数showstep设置是否显示间断点。其效果如下：

基础参数tips设置是否显示提示，也即鼠标移动或拖拽时显示当前滑块值。
基础参数input设置是否显示输入框，也即手输滑块值设置滑块位置。其效果如下所示：

基础参数disabled设置滑块的只读状态，值为true时滑块不能拖拽。
基础参数theme设置滑块的颜色。

参考文献：
[1]B站：layui框架精讲全套视频教程
[2]https://layui.gitee.io/v2/docs/
[3]https://layui.gitee.io/v2/demo/
[4]https://github.com/layui/layui/
[5]https://www.mdui.org/design/components/sliders.html#

layui框架学习（29：滑块模块）相关推荐

layui框架学习（4：导航）
layui官网教程采用html中的无序列表和定义列表来实现导航样式(文章最后还有个关于导航所用元素的补充说明),主要包括水平导航.垂直/侧边导航,同时还支持用span和a元素实现面包屑导航样式.导 ...
layui框架学习（1：布局）
Layui是开源的 Web UI 组件库,虽然目前已不算是最主流的前端框架,但很多开源项目都采用Layui设计页面,为了学习相关的项目,同时也为了掌握Layui的基本用法,特此基于B站的Layui ...
layui框架学习（13：辅助元素）
Layui官网教程中页面元素的大部分内容都过了一遍,就剩下表单和辅助元素,由于表单的内容比较多,准备先把辅助元素的内容先学习了,再花几篇文章学习并记录表单样式的设置方式. 辅助元素主要包括引用 ...
layui框架学习（10：时间线）
时间线,英文timeline,也叫时光轴.时间轴,是指以时间为记录方式的一种网络布局形式,其形式之一为下图所示(示例图来自参考文献5). Layui官网教程中的更新日志页面也用了时间线样式,如 ...
layui框架学习（11：徽章）
应用程序有新增内容.未读消息时,会在按钮或菜单中添加红点或带数字的点状或方状图形,用户看到就知道有新内容,如下图所示QQ邮箱的截图,会通过红色圆点或带NEW的方框提醒用户有新内容可以查看. C ...
layUi框架入门篇（一）
layUi框架学习笔记(一) 整理人:LF 时间:2017-9-1 表示今天第一次听说了layui的前端框架,上网搜了很多的资料和图示,对比了一下自己辛辛苦苦写了十天的网页样式,最后不得不感叹前端框架 ...
前端学习之LayUi框架基础
今天笔者学习了LayUi框架的一些基础内容,总体来说,LayUi框架比BootStrap框架更倾向于后台的搭建和使用,样式更加多样,说明也对国人更加友好,毕竟是国人开发的框架嘛~废话不多少,开始介绍. ...
Layui框架form模块的表单验证
在layui框架里边针对于表单元素做了比较多的功能,下面将介绍的功能就是form模块里面自00带的表单验证功能,该功能可以在提交表单时自动验证表单. 首先要使用form模块时需要加载模块,这是所有模块 ...
layui概述||layui的学习内容
概述下载地址 https://www.layui.com/ 下载文件说明 layui.all.js 包含了所有模块的js layui.js 框架如果要使用必须使用 layui.use ...

layui框架学习（29：滑块模块）

layui框架学习（29：滑块模块）相关推荐

最新文章

热门文章