滑塊特效外掛rangeSlider，帶刻度，rangeSlider實現進度範圍選擇
先看效果，樣式還是可以的
實現也很簡單
@section Styles{ <link href="~/ion.rangeSlider-2.2.0/css/ion.rangeSlider.css" rel="stylesheet" />
根據自己的愛好選擇樣式 <link href="~/ion.rangeSlider-2.2.0/css/ion.rangeSlider.skinModern.css" rel="stylesheet" /> <link href="~/ion.rangeSlider-2.2.0/css/ion.rangeSlider.skinNice.css" rel="stylesheet" /> <link href="~/ion.rangeSlider-2.2.0/css/ion.rangeSlider.skinSimple.css" rel="stylesheet" /> <link href="~/ion.rangeSlider-2.2.0/css/ion.rangeSlider.skinHTML5.css" rel="stylesheet" /> <link href="~/ion.rangeSlider-2.2.0/css/ion.rangeSlider.skinFlat.css" rel="stylesheet" />
}
html部分： <div style="width: 76%;"> <div id="costRange"></div> </div>
js部分：
@section Scripts{
<script src="~/ion.rangeSlider-2.2.0/js/ion-rangeSlider/ion.rangeSlider.min.js"></script> <script> // 造價範圍選擇 $("#costRange").ionRangeSlider({ type: "single", //min: 0, //max: 2, //from: 0, //to: 700, //step: 1, //hide_min_max: true, //values:[0,1,2], values: ["低", "中", "高"],//實現自定義刻度 grid: true, grid_num:1, }); </script>}
設定
| 選項 | 資料的Attr | 預設 | 型別 | 描述 |
|---|---|---|---|---|
type |
data-type |
single |
串 | 選擇滑塊型別，可以是single- 對於一個手柄，或double對於兩個手柄 |
min |
data-min |
10 |
數 | 設定滑塊最小值 |
max |
data-max |
100 |
數 | 設定滑塊最大值 |
from |
data-from |
min |
數 | 設定左手柄的起始位置（或單手柄） |
to |
data-to |
max |
數 | 設定右手柄的起始位置 |
step |
data-step |
1 |
數 | 設定滑塊步驟。總是> 0.可能是分數 |
min_interval |
data-min-interval |
- |
數 | 設定滑塊之間的最小間隔。僅適用於雙人型 |
max_interval |
data-max-interval |
- |
數 | 設定滑塊之間的最小最大值。僅適用於雙人型 |
drag_interval |
data-drag-interval |
false |
布林 | 允許使用者拖動整個範圍。僅適用於雙人型 |
values |
data-values |
[] |
排列 | 設定您自己的滑塊值陣列。它們可以是數字或字串。如果設定了values陣列，則不能再更改min，max和step param |
from_fixed |
data-from-fixed |
false |
布林 | 固定左（或單）手柄的位置 |
from_min |
data-from-min |
min |
數 | 設定左（或單）手柄的最小限制 |
from_max |
data-from-max |
max |
數 | 設定左（或單）手柄的最大限制 |
from_shadow |
data-from-shadow |
false |
布林 | 突出顯示左手柄的限制 |
to_fixed |
data-to-fixed |
false |
布林 | 固定右手柄的位置 |
to_min |
data-to-min |
min |
數 | 設定右手柄的最小限制 |
to_max |
data-to-max |
max |
數 | 設定右手柄的最大限制 |
to_shadow |
data-to-shadow |
false |
布林 | 突出顯示正確的手柄 |
prettify_enabled |
data-prettify-enabled |
true |
布林 | 提高長數字的可讀性：10000000→10 000 000 |
prettify_separator |
data-prettify-separator |
串 | 為長數字設定自己的分隔符：10000000→10,000,000等。 | |
prettify |
- |
null |
功能 | 設定自己的美化功能。可以是任何東西。例如，您可以將unix時間設定為滑塊值，然後將它們轉換為看起來很酷的日期 |
force_edges |
data-force-edges |
false |
布林 | 滑塊手柄和工具提示將始終位於其容器內 |
keyboard |
data-keyboard |
true |
布林 | 啟用鍵盤控制元件。向左移動：←，↓，A，S。向右移動：→，↑，W，D。 |
grid |
data-grid |
true |
布林 | 在滑塊上方啟用值網格 |
grid_margin |
data-grid-margin |
true |
布林 | 設定左右網格間隙 |
grid_num |
data-grid-num |
4 |
數 | 網格單元數 |
grid_snap |
data-grid-snap |
false |
布林 | 將網格捕捉到滑塊步驟（步驟引數）。如果啟用，則不使用grid_num。最大步數= 50 |
hide_min_max |
data-hide-min-max |
false |
布林 | 隱藏最小和最大標籤 |
hide_from_to |
data-hide-from-to |
false |
布林 | 隱藏的和以標籤 |
prefix |
data-prefix |
`` | 串 | 設定值的字首。將在數字之前設定：** $ ** 100 |
postfix |
data-postfix |
`` | 串 | 設定值的字尾。將在數字後立即設定：100 k |
max_postfix |
data-max-postfix |
`` | 串 | 特殊字尾，僅用於最大值。將在手柄到達最大右側位置後顯示。例如0 - 100+ |
decorate_both |
data-decorate-both |
true |
布林 | 用於雙重型別，僅在設定了字首或字尾時使用。確定如何裝飾接近的值。例如：$ 10k - $ 10萬或$ 10 - 100k |
values_separator |
data-decorate-both |
- |
串 | 為關閉值設定您自己的分隔符。用於雙重型別。預設值：10 - 100。或者您可以設定：10到100,10 + 100,10→100等。 |
input_values_separator |
data-input-values-separator |
; |
串 | 輸入值屬性中的double值的分隔符。<input value="25;42"> |
disable |
data-disable |
false |
布林 | 鎖定滑塊並使其處於非活動狀態。輸入也被禁用。形式看不見 |
block |
data-blokc |
false |
布林 | 鎖定滑塊並使其處於非活動狀態。輸入未被禁用。可以傳送表格 |
extra_classes |
data-extra-classes |
— |
串 | 將額外的CSS類遍歷到滑塊容器 |
scope |
- |
null |
目的 | 回撥範圍。傳遞任何物體 |
onStart |
- |
null |
功能 | 回電話。在滑塊啟動時呼叫。獲取所有滑塊資料作為第一個屬性 |
onChange |
- |
null |
功能 | 回電話。IS呼叫每個值的變化。獲取所有滑塊資料作為第一個屬性 |
onFinish |
- |
null |
功能 | 回電話。在使用者釋放控制代碼時呼叫。獲取所有滑塊資料作為第一個屬性 |
onUpdate |
- |
null |
功能 | 回電話。當滑塊由外部方法修改被稱為update或reset |
裡面還有很多domel