滑塊文檔 - layui.slider

作為一個(gè)拖拽式的交互性組件，滑塊往往能給產(chǎn)品帶來(lái)更好的操作體驗。layui 深以為然，slider 模塊包含了你能想到的大部分功能，盡管它可以作為一個(gè)獨立的個(gè)體，但很多時(shí)候它往往會(huì )出現 form 元素中，想象一下吧。

模塊加載名稱(chēng)：slider
注意：slider 為 layui 2.4.0 新增模塊

使用

通過(guò)對 slider 模塊的使用，你可以在頁(yè)面構建出可拖動(dòng)的滑動(dòng)元素，如下是一個(gè)最基本的用法：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>滑塊</title>
  <link rel="stylesheet" href="../src/css/layui.css">
</head>
<body>
<div id="slideTest1"></div>
<script src="../src/layui.js"></script>
<script>
layui.use('slider', function(){
  var slider = layui.slider;
  
  //渲染
  slider.render({
    elem: '#slideTest1'  //綁定元素
  });
});
</script>
</body>
</html>

基礎參數

slider 組件支持以下參數

參數選項	說(shuō)明	類(lèi)型	默認值
elem	指向容器選擇器	string/object	-
type	滑塊類(lèi)型，可選值有：default（水平滑塊）、vertical（垂直滑塊）	string	default
min	滑動(dòng)條最小值，正整數，默認為 0	number	0
max	滑動(dòng)條最大值	number	100
range	是否開(kāi)啟滑塊的范圍拖拽，若設為 true，則滑塊將出現兩個(gè)可拖拽的環(huán)	boolean	false
value	滑塊初始值，默認為數字，若開(kāi)啟了滑塊為范圍拖拽（即 range: true），則需賦值數組，異表示開(kāi)始和結尾的區間，如：value: [30, 60]	number/Array	0
step	拖動(dòng)的步長(cháng)	number	1
showstep	是否顯示間斷點(diǎn)	boolean	false
tips	是否顯示文字提示	boolean	true
input	是否顯示輸入框（注意：若 range 參數為 true 則強制無(wú)效）點(diǎn)擊輸入框的上下按鈕，以及輸入任意數字后回車(chē)或失去焦點(diǎn)，均可動(dòng)態(tài)改變滑塊	boolean	false
height	滑動(dòng)條高度，需配合 type:"vertical" 參數使用	number	200
disabled	是否將滑塊禁用拖拽	boolean	false
theme	主題顏色，以便用在不同的主題風(fēng)格下	string	#009688

自定義提示文本

當鼠標放在圓點(diǎn)和滑塊拖拽時(shí)均會(huì )觸發(fā)提示層。其默認顯示的文本是它的對應數值，你也可以自定義提示內容：

slider.render({
  elem: '#slideTest1'
  ,setTips: function(value){ //自定義提示文本
    return value + '%';
  }
});

數值改變的回調

在滑塊數值被改變時(shí)觸發(fā)。該回調非常重要，可動(dòng)態(tài)獲得滑塊當前的數值。你可以將得到的數值，賦值給隱藏域，或者進(jìn)行一些其它操作。

//當滑塊為普通模式，回調返回的 value 是一個(gè)數值
slider.render({
  elem: '#slideTest1'
  ,change: function(value){
    console.log(value) //動(dòng)態(tài)獲取滑塊數值
    //do something
  }
});
 
//當滑塊為范圍模式，回調返回的 value 是一個(gè)數組，包含開(kāi)始和結尾
slider.render({
  elem: '#slideTest1'
  ,range: true
  ,change: function(value){
    console.log(value[0]) //得到開(kāi)始值
    console.log(value[1]) //得到結尾值
    //do something
  }
});

實(shí)例方法

執行 slider 實(shí)例時(shí)，會(huì )返回一個(gè)當前實(shí)例的對象，里面包含針對當前實(shí)例的方法和屬性。
語(yǔ)法：var ins1 = slider.render(options);

var ins1 = slider.render(options); //獲得實(shí)例對象
 
ins1.config //獲得當前實(shí)例的配置項
ins1.setValue(nums); //動(dòng)態(tài)給滑塊賦值

動(dòng)態(tài)改變滑塊數值

你可以通過(guò)外部方法動(dòng)態(tài)改變滑塊數值，如：

var ins1 = slider.render({
  elem: '#test1'
  //…
});      
 
//改變指定滑塊實(shí)例的數值
ins1.setValue(20)
 
//若滑塊開(kāi)啟了范圍（range: true）
ins1.setValue(20, 0) //設置開(kāi)始值
ins1.setValue(60, 1) //設置結尾值

結語(yǔ)

layui.slider 可以大幅度提升你 Web 應用中的很多操作體驗，可盡情發(fā)揮。

layui - 在每一個(gè)細節中，用心與你溝通

xxxx日本护士丰满hd|亚洲av日韩av无码av欧美av|精品国产污污网站在线看免费|日日摸日日碰夜夜爽久久|国产一区二区亚洲精品

滑塊文檔 - layui.slider