最佳范围输入替换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

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将其所有参数粘贴到回调第一个参数作为对象
• 滑块支持日期和时间

如果你知道使用Vanilla JS或jQuery编写的另一个很棒的范围输入替换库, 请在注释框中与社区共享。