layuiæ»å
-
æ»å
ç¸å ³å±æ§
elem ï¼ç»å®é¡µé¢å ç´
value 设置åå§å¼
min æå°å¼
max æ大å¼
step 设置æ¥é¿
setTips æ»å¨æ¶æ¯å¦æ¾ç¤ºtipsææ¬
change çå¬æ¹åäºä»¶
<%--
Created by IntelliJ IDEA.
User: Lenovo
Date: 2019/10/2
Time: 15:37
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
<title>æ»åå¨</title>
<link rel="stylesheet" href="./libs/layui/css/layui.css">
<link rel="stylesheet" href="./libs/css/global.css">
<script type="text/javascript" src="./libs/layui/layui.js"></script>
<style type="text/css">
.demo-slider{
margin-top: 40px;
}
</style>
</head>
<body style="padding: 30px;">
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>åºæ¬æ»å</legend>
</fieldset>
<div id="slideTest1" class="demo-slider"></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>å®ä¹åå§å¼</legend>
</fieldset>
<div id="slideTest2" class="demo-slider"></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>设置æ大æå°å¼</legend>
</fieldset>
<div id="slideTest3" class="demo-slider"></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>设置æ¥é¿</legend>
</fieldset>
<div id="slideTest4" class="demo-slider"></div>
<div id="slideTest5" class="demo-slider"></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>设置æ示ææ¬</legend>
</fieldset>
<div id="slideTest6" class="demo-slider"></div>
<div id="slideTest7" class="demo-slider"></div>
<div id="test-slider-tips1" style="position:relative; left: 30px; top: -20px;"></div>
<script>
layui.use(['element','jquery','colorpicker','layer','slider'], function(){
var $=layui.jquery;
var element=layui.element;
var colorpicker=layui.colorpicker;
var layer=layui.layer;
var slider=layui.slider;
//常è§ä½¿ç¨
//é»è®¤æ»å
slider.render({
elem: '#slideTest1'
});
//å®ä¹åå§å¼
slider.render({
elem: '#slideTest2'
,value: 20 //åå§å¼
});
//设置æ大æå°å¼
slider.render({
elem: '#slideTest3'
,min: 20 //æå°å¼
,max: 50 //æ大å¼
});
//设置æ¥é¿
slider.render({
elem: '#slideTest4'
,step: 10 //æ¥é¿
});
slider.render({
elem: '#slideTest5'
,step: 10 //æ¥é¿
,showstep: true //å¼å¯é´éç¹
});
//设置æ示ææ¬
slider.render({
elem: '#slideTest6'
,min: 20
,max: 1000
,setTips: function(value){ //èªå®ä¹æ示ææ¬
return value + 'GB';
}
});
slider.render({
elem: '#slideTest7'
,tips: false //å ³éé»è®¤æ示å±
,change: function(value){
$('#test-slider-tips1').html('å½åæ°å¼ï¼'+ value);
}
});
});
</script>
</body>
</html>
ææå¦ä¸ï¼