随身笔记
随身笔记

ion.rangeSlider.min.js滑块

js 滑块 刻度条

https://sdeno.com/wp-content/uploads/2015/04/rangeslider1.jpg

rangeSlider

官网: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 功能 回电话。当滑块由外部方法修改被称为updatereset

 

huakuai

可兼容IE7+

http://pan.baidu.com/s/1hqxQ67y

 

随身笔记

ion.rangeSlider.min.js滑块
js 滑块 刻度条 rangeSlider 官网:http://ionden.com/a/plugins/ion.rangeSlider/demo_interactions.html 设置 选项 数据的Attr 默认 类型 描述 type …
扫描二维码继续阅读
2015-04-09