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。