最近做商城的時候，需要做選擇價格區間的這麽一個功能，為了讓選擇更加直觀，更加靈活；在網上搜索到了一款不錯的插件，一款jQuery插件jRange：

官網地址：http://nitinhayaran.github.io/jRange/demo/
Git地址：https://github.com/nitinhayaran/jRange

該插件使用起來也比較簡單（而且官網也有詳細說明）：

首先引入兩個文件：<link rel="stylesheet" type="text/css" href="css/jquery.range.css">

<script type="text/javascript" src="js/jquery.range.js"></script>（當然還有jquery-1.11.3.min.js，畢竟該插件是以jquery開發的）

html部分代碼：<input type="hidden" id="range" class="slider-input" value="3000" />

js部分：

$(‘.slider-input‘).jRange({
from: 0,
to: 10000,
step: 1,
format: ‘%s‘+‘元‘,
width: 240,
showLabels: true,
isRange : true
});

以上就是引用過程，就是這麽簡單！

下面是選項配置（圖片來自於http://www.jb51.net/article/62235.htm）：

上面的一些選項配置可以滿足需求，不過，漏了一個我覺得比較重要配置上面沒寫出來（雖然官網也有介紹），那就是：onstatechange選項，該選項就是說每當用戶更改值時，這個函數就會被調用。同樣的值也會自動為所提供的隱藏輸入設置。對於單個滑塊值沒有逗號，但對於範圍選擇器值是逗號分隔的。

以上就是我要分享的全部內容！！！

jQuery插件jRange滑動選取數值範圍---使用心得