有時我們在頁面上需要選擇數值範圍，如購物時選取價格區間，購買主機時自主選取CPU，記憶體大小配置等，使用直覺的滑桿條直接選取想要的數值大小即可，無需手動輸入數值，操作簡單又方便。
HTML
首先載入jQuery庫檔案以及jRange相關的css檔案：jquery.range.css和外掛程式：jquery.range.js
然後在需要展示滑桿選擇器的位置放入以下程式碼：
我們使用了hiiden類型的文字域，設定預設值value，如23。
jQuery
呼叫jRange外掛非常簡單，直接用下面的程式碼：
然後運行你的網頁，你將看到DEMO中的效果。
選項設定
外掛程式jRange也提供了一些必要的選項設定來滿足各種需求。
| 選項 | 說明 | 預設值 |
| from | 滑動範圍的最小值，數字，如0 | |
| to | 滑動範圍的最大值，數字，如100 | |
| step | 步長值，每次滑動大小 | 1 |
| scale | 滑動條下方的尺度標籤，陣列類型，如[0,50,100] | [from,to] |
| showLabels | 布林型，是否顯示滑動條下方的尺寸標籤 | true |
| showScale | 布林型，是否顯示滑桿上方的數值標籤 | true |
| format | 數值格式 | "%s" |
| 幅 | スライダーバーの幅 | 300 |
| 範囲 | 選択範囲かどうか。 | 偽 |
詳細については、jRange プロジェクトの公式 Web サイトを参照してください: https://github.com/nitinhayaran/jRange
上記はこの記事の全内容です。必要な方は参考にしていただければ幸いです。
