滑塊文檔 - layui.slider

                    作為一個拖拽式的交互性組件,滑塊往往能給產品帶來更好的操作體驗。layui 深以為然,slider 模塊包含了你能想到的大部分功能,盡管它可以作為一個獨立的個體,但很多時候它往往會出現 form 元素中,想象一下吧。
                    模塊加載名稱:slider

                    注意:slider 為 layui 2.4.0 新增模塊

                    使用

                    通過對 slider 模塊的使用,你可以在頁面構建出可拖動的滑動元素,如下是一個最基本的用法:

                    <!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 組件支持以下參數

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

                    當鼠標放在圓點和滑塊拖拽時均會觸發提示層。其默認顯示的文本是它的對應數值,你也可以自定義提示內容:

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

                    在滑塊數值被改變時觸發。該回調非常重要,可動態獲得滑塊當前的數值。你可以將得到的數值,賦值給隱藏域,或者進行一些其它操作。

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

                    執行 slider 實例時,會返回一個當前實例的對象,里面包含針對當前實例的方法和屬性。
                    語法:var ins1 = slider.render(options);

                    var ins1 = slider.render(options); //獲得實例對象
                     
                    ins1.config //獲得當前實例的配置項
                    ins1.setValue(nums); //動態給滑塊賦值
                          
                    動態改變滑塊數值

                    你可以通過外部方法動態改變滑塊數值,如:

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

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

                    layui - 用心與你溝通

                    亚洲图色