基於Bootstrap的炫酷jQuery slider插件

這是一款在原生bootstrap slider的基礎上制作效果非常炫酷的jQuery slider插件。該slider插件可以自定義slider的顏色、形狀、透明度和tooltip等屬性，美化的效果非常好。

安裝

可以使用npm和bower來安裝該slider插件。

 
                 npm install bootstrap-slider 
                
                 bower install seiyria-bootstrap-slider

使用方法

首先要在頁面中引入必要的css和js文件。

 
            
             
               
                 < 
                 link 
                 href 
                 = 
                 "css/bootstrap.min.css" 
                 rel 
                 = 
                 "stylesheet" 
                 > 
                
 
                 < 
                 link 
                 href 
                 = 
                 "css/bootstrap-slider.css" 
                 rel 
                 = 
                 "stylesheet" 
                 > 
                
 
                 < 
                 script 
                 type 
                 = 
                 'text/javascript' 
                 src 
                 = 
                 "js/jquery.min.js" 
                 ></ 
                 script 
                 > 
                
 
                 < 
                 script 
                 type 
                 = 
                 'text/javascript' 
                 src 
                 = 
                 "js/bootstrap-slider.js" 
                 ></ 
                 script 
                 > 
                
 
             
 
            
          

記住要在引入完上邊的文件后才可以開始調用該bootstrap slider插件。

注意：這個bootstrap slider插件可以不依賴於jQuery，使用純js的方式也可以操作它。

瀏覽器兼容

該bootstrap slider插件只支持現代瀏覽器，低於IE9的瀏覽器都不支持。

應用舉例

作為jQuery插件版本的bootstrap-slider。

插件一個input元素，然后在它上面調用.slider()方法。

 
                 // Instantiate a slider 
                
                 var 
                 mySlider = $( 
                 "input.slider" 
                 ).slider(); 
                
                 // Call a method on the slider 
                
                 var 
                 value = mySlider.slider( 
                 'getValue' 
                 ); 
                
                 // For non-getter methods, you can chain together commands 
                
                 mySlider 
                
                 .slider( 
                 'setValue' 
                 , 5) 
                
                 .slider( 
                 'setValue' 
                 , 7);

如果已經有一個jQuery插件的slider()綁定在該命名空間中，那么bootstrap slider插件會一個候補的調用方法bootstrapSlider。

 
                 // Instantiate a slider 
                
                 var 
                 mySlider = $( 
                 "input.slider" 
                 ).bootstrapSlider(); 
                
                 // Call a method on the slider 
                
                 var 
                 value = mySlider.bootstrapSlider( 
                 'getValue' 
                 ); 
                
                 // For non-getter methods, you can chain together commands 
                
                 mySlider 
                
                 .bootstrapSlider( 
                 'setValue' 
                 , 5) 
                
                 .bootstrapSlider( 
                 'setValue' 
                 , 7);

使用原生js調用bootstrap slider

在DOM中創建一個input元素，然后通過選擇器為該input元素創建slider實例。

 
                 // Instantiate a slider 
                
                 var 
                 mySlider =  
                 new 
                 Slider( 
                 "input.slider" 
                 , { 
                
                 // initial options object 
                
                 }); 
                
                 // Call a method on the slider 
                
                 var 
                 value = mySlider.getValue(); 
                
                 // For non-getter methods, you can chain together commands 
                
                 mySlider 
                
                 .setValue(5) 
                
                 .setValue(7);

配置參數

以下這些參數也可以通過一個data屬性（data-slider-foo）或作為slider對象的一部分來調用。

參數名稱	參數類型	默認值	描述
id	string	' '	設置slider元素的id
min	float	0	slider允許的最小值
max	float	10	slider允許的最大值
step	float	1	slider的步長
precision	float	小數的位數	slider數值的精度。
orientation	string	'horizontal'	設置slider的初始值，設置為數組表示一個范圍。的方向。可選值：'vertical' 或 'horizontal'
value	float,array	5	slider的初始值，設置為數組表示一個范圍。
range	bool	false	是否設置一個范圍slider。如果初始化值為一個數組，該選項可選。如果初始化值為scalar，最大值將使用第二個值。
selection	string	'before'	選擇配置。接收：'before', 'after' 或 'none'。在范圍slider中，selection 被放置在兩個手柄中間。
tooltip	string	'show'	在拖動手柄時是否顯示tooltip，隱藏tooltip，或者總是顯示tooltip。可選值：'show', 'hide' 或 'always'
tooltip_split	bool	false	如果是flase顯示一個tooltip，如果設置為true，顯示兩個tooltip，每個手柄顯示一個。
handle	string	'round'	手柄的形狀。可選值： 'round', 'square', 'triangle' 或 'custom'
reversed	bool	false	slider是否反向
enabled	bool	true	slider是否可用
formatter	function	返回文本值	回調函數。返回想在tooltip中顯示的文字。
natural_arrow_keys	bool	false	是否允許使用鍵盤的方向鍵來控制slider。默認情況下，right/up鍵是slider數值增大，left/down鍵使slider數值減少。

方法

方法	參數	描述
getValue	---	獲取slider的當前值
setValue	newValue, triggerSlideEvent	為slider設置一個新值。如果可選的triggerSlideEvent參數為true，'slide'事件將被觸發。
destroy	---	移除和銷毀slider實例
disable	---	使slider不可用，用戶不能修改slider的值
enable	---	使slider可用
toggle	---	在slider可用與不可用之間切換
isEnabled	---	如果slider可用返回true，否則返回false
setAttribute	attribute, value	更新slider的屬性
getAttribute	attribute	獲取slider的屬性
refresh	---	刷新當前的slider
on	eventType, callback	當slider的`eventType`事件被觸發，回調函數將被調用
relayout	---	在初始化之后重新渲染tooltip。這在slider和tooltip在初始化時是隱藏的時候非常有用

事件

事件	描述	返回值
slide	當slider被拖動時觸發	新的slider值
slideStart	當slider開始拖動時觸發	新的slider值
slideStop	當slider停止拖動或slider被點擊時觸發	新的slider值
change	slider的值改變時觸發	帶有兩個屬性的對象："oldValue"和"newValue"
slideEnabled	當設置slider為可用時觸發	N/A
slideDisabled	當設置slider為不可用時觸發	N/A