ionic Range

Ionic Range

Ionic Range是一个基于HTML5 input type="range"标签封装的指令，允许用户在移动设备上设置数值范围。

HTML5 Range Input

HTML5 Range Input是一个用于创建可拖动滑块的标准输入元素。它允许用户在指定的最小值和最大值之间设置数值，而且可以添加滑块刻度和拖动事件。

<input type="range" min="0" max="100" step="1">

上面是一个基本的HTML5 Range Input元素，使用了最小值0，最大值100和步长1。

Ionic Range

Ionic Range依赖于HTML5 Range Input，并利用样式和附加项来增强默认的HTML5输入类型。

<ion-range min="0" max="100" step="1"></ion-range>

Ionic Range用<ion-range>标记指令替换了HTML5 Range Input元素，使用了与HTML5 Range Input元素相同的属性。使用Ionic Range的好处是可以轻松添加附加功能，如标签、颜色、事件和文本输入框。

Range Attributes

以下是Ionic Range指令所支持的属性：

  • min: 允许用户设置范围最小值，也可以通过ng-model或指定的值进行设置，默认为0。
  • max: 允许用户设置范围最大值，也可以通过ng-model或指定的值进行设置，默认为100。
  • step: 允许用户设置每次移动的步长量，默认为1。
  • name: 用于表单控件的名称属性，用于在表单提交时标识该元素。
  • ng-model: 用于在控制器中获取或设置元素的值的指令。
  • ion-change: 给元素添加一个回调函数，以在滑块的值更改时更新模型数据。
  • color: 定义滑动条的颜色。可以使用text color，如danger、primary、secondary、tertiary等。
  • pin: 如果为true，则在滑动条上方显示当前值的图钉。
  • disabled: 如果为true，则禁用整个控件。

Range events

  • ionChange: 滑块值发生变化时触发。

RangeJs

RangeJS是一个库，它是一个扁平化，极简化的JavaScript版本，用于处理HTML5 Range Input元素，并扩展其文件功能。它允许开发人员以可视化方式改变段的外观。

var r = new Range('#range', {
  rangeClass: 'range-slider',
  fillClass: 'range-fill',
  handleClass: 'range-handle'
});

总结

Ionic Range是一个很好用的库，它可以很容易地为你的Web应用程序添加滑动选择器，带有附加特性，如标记、颜色和事件。同时，它还支持HTML5 Range Input集成，并 包含一个可扩展的JavaScript库 - RangeJS。

ionic icon(图标) ionic select