范围滑块Ion.RangeSlider的说明
原创 滑块 2021-01-21 22:56:25
2 收藏 2 浏览1478 评论0
琴朗
已发33篇
有侵犯版权请及时联系我们,我们将在24小时内删除文章。
投诉举报


本站下载演示地址:https://www.yusan.cn/sucai/52.html

Github地址:https://github.com/IonDen/ion.rangeSlider


介绍

  • Ion.RangeSlider —凉爽,舒适,反应灵敏且易于自定义的范围滑块

  • 支持事件和公共方法,具有灵活的设置,可以使用CSS进行完全更改

  • 跨浏览器:Google Chrome,Mozilla Firefox 3.6 +,Opera 12 +,Safari 5 +,Internet Explorer 8+

  • Ion.RangeSlider支持触摸设备(iPhone,iPad,Nexus等)。

  • Ion.RangeSlider根据MIT许可自由分发。

  • 使用此插件,您将能够构建漂亮的范围滑块


主要特征

  • 皮肤支持。(包括6种皮肤)

  • 一页上有任意数量的滑块,没有冲突和严重的性能问题

  • 两种滑块类型:单(1个滑块)和双(2个滑块)

  • 支持负和小数值

  • 能够设置自定义步骤和将网格对齐到步骤

  • 支持自定义值diapason

  • 可自定义的值网格

  • 能够禁用UI元素(最小和最大,当前值,网格)

  • 数字的后缀和前缀(20美元,20欧元等)

  • 最大值的附加后缀(例如$ 0-$ 100 +)

  • 美化大量数字的能力(例如10000000-> 10000000或10.000.000)

  • 滑块将其值直接写入输入值字段。这使得它易于以任何html形式使用

  • 可以通过输入数据属性设置任何滑块值(例如,data-min =“ 10”)

  • 滑块支持禁用参数。您可以将其设置为true以使滑块不活动

  • Slider支持外部方法(更新,重置和删除)在创建后对其进行控制

  • 对于高级用户,滑块具有回调(onStart,onChange,onFinish,onUpdate)。Slider粘贴其所有参数以将第一个参数作为对象回调

  • 滑块支持日期和时间



选项说明


注意:经常会使用,我用红色加粗标注了,仅供参考。

选项Data-Attr默认值类型描述
skin
data-skinflatstring皮肤外观 (flat, big, modern, round, sharp, square)


flat如下图

Image 12.png

big如下图

Image 13.png

modern如下图

Image 14.pnground如下图

Image 15.png

sharp如下图

Image 16.png

square如下图

Image 17.png


typedata-typesinglestring选择滑块类型,可以是单手柄(single),也可以是双手柄(double)

设置type:"single",效果如下图

type:"single",

Image 8.png

设置type:"double",效果如下图

type:"double",

Image 7.png

mindata-min10number设置滑块最小值
maxdata-max100number设置滑块最大值
fromdata-from设置的min值number设置左手柄(或单手柄)的开始位置
todata-to设置的max值number设置右手柄的开始位置
stepdata-step1number

设置滑块数目。>0,可以是小数。

就是移动一次增加/减少的数量,

比如设置10,那么一次就是增加或者减少010

min_intervaldata-min-interval-
number

设置滑块之间的最小间距

仅当滑块类型(type)=double时有效

max_intervaldata-max-interval-number

设置滑块之间的最大间距

仅当滑块类型(type)=double时有效

drag_intervaldata-drag-intervalfalseboolean允许用户拖动整个范围。仅当滑块类型(type)=double时有效
valuesdata-values[]array

设置自己的可能的滑块值数组。它们可以是数字或字符串。如果设置了values数组,则无法再更改min,max和step参数

如设置了values: [0,10,20,30,60,90],则如下图

values: [0,10,20,30,60,90],

Image 1.png

from_fixeddata-from-fixedfalseboolean固定左(或单个)手柄的位置
from_mindata-from-minminnumber设置左(或单个)手柄的最小限制
from_maxdata-from-maxmaxnumber设置左(或单个)手柄的最大限制
from_shadowdata-from-shadowfalseboolean突出显示左手柄的限制

设置 from_min:10,from_max:50,from_shadow:true的效果如下

from_min:10,
from_max:50,
from_shadow:true,

Image 2.png

to_fixeddata-to-fixedfalseboolean固定右手柄位置
to_mindata-to-minminnumber设置右手柄的最小限制
to_maxdata-to-minmaxnumber设置右手柄的最大限制
to_shadowdata-to-shadowfalseboolean突出显示右手柄的限制

上面设置 

from_min:10,from_max:50,from_shadow:true,

to_min:60,to_max:90,to_shadow:true的效果如下

from_min:10,
from_max:50,
from_shadow:true,
to_min:60,
to_max:90,
to_shadow:true,

Image 3.png

prettify_enableddata-prettify-enabledtrueboolean提高长数字的可读性:10000000→10000

默认是true,prettify_enabled:true,如下图显示

prettify_enabled:true,

Image 4.png

如设置false,prettify_enabled:false,则数字都会挤在一起,不好识别,如下图

prettify_enabled:false,

Image 5.png

prettify_separatordata-prettify-separator
string设置自己的长整数分隔符:10000000→10,000,000等。

如设置prettify_separator:",",则效果如下

prettify_separator:",",

Image 6.png

prettify
nullfunction设置自己的整理功能。可以是任何东西。例如,您可以将Unix时间设置为滑块值,然后将其转换为漂亮的日期

如设置values里面是时间戳,prettify里面是转化时间戳为日期,则如下图

values: ["1611375369","1611893769","1612412169"],
prettify: function(e){
   return new Date(parseInt(e) * 1000).toLocaleString();  
},

Image 9.png


force_edgesdata-force-edgesfalseboolean滑块手柄和工具提示将始终位于容器内
keyboarddata-keyboardtrueboolean激活键盘控件。向左移动:←,↓,A,S。向右移动:→,↑,W,D。
griddata-gridtrueboolean是否启用滑块上的网格线。

默认是开启的,如下图红色标注的,可以看到有网格线

Image 10.png

grid_margindata-grid-margintrueboolean设置左右网格间隙
grid_numdata-grid-num4number网格单位数

如从0-1000设置了5个,则出现5个网格,如下图

分别是0-200,200-400,400-600,600-800,800-1000

Image 18.png

grid_snapdata-grid-snapfalseboolean将网格对齐到滑块步骤(步骤参数)。如果激活,将不使用grid_num。最大步数= 50
hide_min_maxdata-hide-min-maxfalseboolean隐藏最小和最大标签
hide_from_todata-hide-from-tofalseboolean隐藏开始和结束标签

假设from:100,设置为hide_from_to:true,则不显示100这个标签,如下图

from:100,
hide_from_to:true,

Image 19.png

prefixdata-prefix
string设置值的前缀。如在值或者数字前面增加¥、$等

如增加¥,效果如下图

 prefix:'¥',

Image 20.png

postfixdata-postfix
string设置值的后缀。如在值或者数字后面增加kg、g等

如增加kg,效果如下图

 prefix:'kg',

Image 21.png

max_postfixdata-max-postfix
string特殊后缀,仅用于最大值。
decorate_bothdata-decorate-bothtrueboolean仅当设置了前缀或后缀时才用于双精度类型。确定如何修饰闭合值。例如:$10k — $100k or $10 — 100k
values_separatordata-decorate-both-string两个值非常接近时,用什么连接,默认是用-,如果10-15

设置为”到“,效果如下图

values_separator:"到",

Image 22.png

input_values_separatordata-input-values-separator;string输入值属性中双值的分隔符。
disabledata-disablefalseboolean锁定滑块并使它不活动。输入也被禁用。形式不可见
blockdata-blockfalseboolean锁定滑块并使它不活动。输入未禁用。可以随表格一起发送
extra_classesdata-extra-classes-string将额外的CSS类遍历到滑块容器
scope
nullobject回调的作用域。传递任何对象
onStart
nullfunction在滑块开始时调用的方法
onStart:function(e){
      console.log(e);
      alert("start");
},
onChange
nullfunction每次值更改时调用。
onChange:function(e){
      console.log(e);
      alert("change");
},
onFinish
nullfunction当用户释放句柄时调用。
onFinish:function(e){
      console.log(e);
      alert("finish");
},
onUpdate
nullfunction当外部方法更新或重置滑块时调用
onUpdate:function(e){
      console.log(e);
      alert("update");
},



评论(0) 我要评论