jQuery滑動選取數值範圍

2021-07-07 05:05:05 字數 1582 閱讀 5426

使用jrange外掛程式實現滑動選取數值範圍,相關**:

1.引用檔案:jquery.min.js jquery.range.js jquery.range.css

2.在html中需要展示滑塊的位置放入隱藏的input標籤,在value中設定預設值。

3.選中隱藏的標籤呼叫jrange()方法並設定初始化值,如

$('.range-slider').jrange();
來呼叫jrange外掛程式。

這是基本的用法,效果如下圖

ie10、ie11效果圖:

ie9效果圖:

ie8效果圖:

ie6效果圖:

隱藏的jrange外掛程式會自動將滑塊選擇的值傳入input標籤,我們獲取input的值就可以了,基本操作在此就不贅述。

外掛程式提供的有2個樣式:theme-blue和theme-green,預設的是theme-green,可以通過theme: 'theme-green'來設定。我們也可以自定義樣式。我們對theme-green的主題做出如下

.slider-container .back-bar .pointer-label
.slider-container .scale ins
.theme-green .back-bar
.theme-green .back-bar .selected-bar
.theme-green .back-bar .pointer
.theme-green .back-bar .pointer-label
.theme-green .scale span
.theme-green .scale ins
修改之後的效果圖:

format的預設值為%s,jrange框架會將format值的%s部分用滑塊的數值替代,剩餘部分不變如format:%smin,將會顯示onstatechange: function() {},

onstatechange: function() {}當滑塊的值被使用者改變是執行,被改變的值依然會賦值給隱藏的標籤。

jRange滑動選取數值範圍外掛程式

當我們在頁面上需要選擇數值範圍時,如購物時選取 區間,購買主機時自主選取cpu,記憶體大小配置等,使用直觀的滑塊條直接選取想要的數值大小即可,無需手動輸入數值,操作簡單又方便。為大家介紹一款jquery外掛程式jrange html 獲取值 獲取值獲取值 獲取值獲取值 js slider input...

mysql數值範圍

時間資料型別轉換為int處理更快 201204 select date format 2008 08 08 22 23 01 y m d h i s int 20 是最大的 int 30 也是int 20 預設為最大值 1.bit m 位欄位型別,m表示每個值的位數,範圍從1到64,如果m被忽略,預...

正數數值範圍

這得從二進位制的原碼說起 如果以最高位為符號位,二進位制原碼最大為0111111111111111 2的15次方減1 32767 最小為1111111111111111 2的15次方減1 32767 此時0有兩種表示方法,即正0和負0 0000000000000000 100000000000000...