最佳范围输入替换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
最佳范围输入替换JavaScript和jQuery插件

文章图片
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
最佳范围输入替换JavaScript和jQuery插件

文章图片
Multirange是用于HTML5多手柄滑块的微型polyfill。它具有以下特点:
  • 缩小后压缩大小只有0.6KB!
  • 没有依赖关系。
  • 使用功能检测, 如果本机支持两个手柄滑块, 则将不会运行。
  • 键盘可访问
  • 单击曲目仍然有效
  • 手柄可以彼此移动
  • 可定制的样式
  • JS属性也被填充(input.value, input.valueLow, input.valueHigh)
5. jRange Github
最佳范围输入替换JavaScript和jQuery插件

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

文章图片
HTML5 < input type =” range” > 滑块元素的简单, 小型和快速的JavaScript / jQuery polyfill。你可以在此处看到很多示例。该插件功能:
  • 触摸屏友好
  • 重新计算onresize, 因此适合在响应式设计中使用
  • 小而快速
  • 支持所有主要浏览器, 包括IE8 +
3. Round Slider UI Github
最佳范围输入替换JavaScript和jQuery插件

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

文章图片
noUiSlider是一种轻量级滑块, 具有全触摸支持和大量功能。它几乎可以与任何设备一起使用, 无论它具有鼠标, 触摸屏还是两者都具有, 并且在响应式设计中将非常有用。它具有以下特点:
  • 响应式设计友好
  • 对iOS, Android和Windows(电话)的触摸支持
  • ARIA支持
  • 没有依赖!
  • 在IE9中测试-IE11, Edge, Chrome, Opera, Firefox和Safari
noUiSlider是开源(MIT), 你可以在任何个人或商业产品中免费使用它。无需注明出处。
1. IonRangeSlider Github
最佳范围输入替换JavaScript和jQuery插件

文章图片
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编写的另一个很棒的范围输入替换库, 请在注释框中与社区共享。

    推荐阅读