jQuery jRange實作滑動選取數值範圍特效_jquery

有時我們在頁面上需要選擇數值範圍，如購物時選取價格區間，購買主機時自主選取CPU，記憶體大小配置等，使用直覺的滑桿條直接選取想要的數值大小即可，無需手動輸入數值，操作簡單又方便。

HTML

首先載入jQuery庫檔案以及jRange相關的css檔案：jquery.range.css和外掛程式：jquery.range.js

複製程式碼 程式碼如下:

然後在需要展示滑桿選擇器的位置放入以下程式碼：

複製程式碼 程式碼如下:

我們使用了hiiden類型的文字域，設定預設值value，如23。

jQuery

呼叫jRange外掛非常簡單，直接用下面的程式碼：

複製程式碼 程式碼如下:

$('.single-slider').jRange({
    from: 0,
    to: 100,
    step: 1,
    scale: [0,25,50,75,100],
    format: '%s',
    width: 300,
    showLabels: true,
    showScale: true
});

然後運行你的網頁，你將看到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

上記はこの記事の全内容です。必要な方は参考にしていただければ幸いです。