js 滑块 刻度条

官网:http://ionden.com/a/plugins/ion.rangeSlider/demo_interactions.html
设置
选项 | 数据的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 |

可兼容IE7+
http://pan.baidu.com/s/1hqxQ67y