最佳范围输入替换JavaScript和jQuery插件 _插件

本文概述

7. Powerange
6. Multirange
5. jRange
4. Rangeslider.js
3. Round Slider UI
2. noUiSlider
1. IonRangeSlider

RangeInput本质上是带有输入字段的数字范围滑块UI组件, 你可以在其中定义一些最小值和最大值, 并且用户可以使用它过滤某些内容。每个人都知道默认设计有多无聊。
在此顶部, 我们将与你分享7个最无用, 记录最好和设计最完善的范围输入替换插件, 你可以轻松地将它们嵌入到Web项目中。
7. Powerange Github

文章图片
Powerange是一个范围滑块控件, 其灵感很大程度上来自iOS 7和” Power Rangers” 电视连续剧。它可以通过CSS和JavaScript轻松自定义。它具有许多功能, 包括更改颜色和整体样式, 在水平样式和垂直样式之间切换, 自定义最小值, 最大值和起始值, 自定义步长间隔, 显示十进制值, 显示图标而不是最小值/最大值, 这是一个非常强大的UI在你的网站上使用的工具。出色的跨浏览器解决方案, 支持：Google Chrome 14 +, Mozilla Firefox 6.0 +, Opera 11.6 +, Safari 5 +, IE 9+
6. Multirange 【最佳范围输入替换JavaScript和jQuery插件】Github

文章图片
Multirange是用于HTML5多手柄滑块的微型polyfill。它具有以下特点：

缩小后压缩大小只有0.6KB！
没有依赖关系。
使用功能检测, 如果本机支持两个手柄滑块, 则将不会运行。
键盘可访问
单击曲目仍然有效
手柄可以彼此移动
可定制的样式
JS属性也被填充(input.value, input.valueLow, input.valueHigh)

5. jRange Github

文章图片
jRange是一个非常简单的jQuery插件, 用于创建范围选择器。
4. Rangeslider.js Github

文章图片
HTML5 < input type =” range” > 滑块元素的简单, 小型和快速的JavaScript / jQuery polyfill。你可以在此处看到很多示例。该插件功能：

触摸屏友好
重新计算onresize, 因此适合在响应式设计中使用
小而快速
支持所有主要浏览器, 包括IE8 +

3. Round Slider UI Github

文章图片
圆形滑块(也可以称为” 圆形” 滑块, “ 径向” 滑块)是一个jQuery插件, 允许用户选择一个值或值的范围。不仅是圆形滑块, 它还支持四分之一, 一半和扇形的圆形。共有三种类型的滑块, 例如默认, 最小范围和范围滑块。默认和最小范围滑块相似, 用于在最小值和最大值之间选择一个值。如果是范围滑块, 则用于选择一个值范围。由于roundSlider将CSS3过渡用于动画, 因此我们可以将任何其他过渡样式用于不同的动画效果。
要使用其他动画, 只需更改” transition-timing-function” 的CSS属性即可。
2. noUiSlider Github

文章图片
noUiSlider是一种轻量级滑块, 具有全触摸支持和大量功能。它几乎可以与任何设备一起使用, 无论它具有鼠标, 触摸屏还是两者都具有, 并且在响应式设计中将非常有用。它具有以下特点：

响应式设计友好
对iOS, Android和Windows(电话)的触摸支持
ARIA支持
没有依赖！
在IE9中测试-IE11, Edge, Chrome, Opera, Firefox和Safari

noUiSlider是开源(MIT), 你可以在任何个人或商业产品中免费使用它。无需注明出处。
1. IonRangeSlider Github

文章图片
IonRangeSlider是一个易于使用, 灵活且反应灵敏的范围滑块, 带有皮肤支撑。该插件功能：

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个滑块)
支持负和小数值
能够设置自定义步骤和将网格对齐到步骤
支持自定义价值观
可自定义的值网格
能够禁用UI元素(最小和最大, 当前值, 网格)
数字的后缀和前缀(20美元, 20欧元等)
最大值的附加后缀(例如, $ 0-$ 100 +)
美化大量数字的能力(例如10000000-> 10000000或10.000.000)
滑块将其值直接写入输入值字段。这使得它易于以任何html形式使用
可以通过输入数据属性设置任何滑块值(例如, data-min =” 10″ )
滑块支持禁用参数。你可以将其设置为true以使滑块不活动
滑块支持外部方法(更新, 重置和删除)以在创建后对其进行控制
对于高级用户, 滑块具有回调(onStart, onChange, onFinish, onUpdate)。 Slider将其所有参数粘贴到回调第一个参数作为对象
滑块支持日期和时间