Range区域选择

允许用户在一个区间中选择特定值，eg：控制屏幕的显示亮度。

规则

  • 默认状态下，左边为最小值，右边为最大值。
  • 一般水平放置。

Common API

参数说明类型默认值
[min]最小值number0
[max]最大值number100
[step]步长，取值必须大于 0，并且可被 (max - min) 整除。当 marks 不为空对象时，可以设置 step 为 null，此时 Slider 的可选值仅有 marks 标出来的部分number | null1
[value]设置当前取值Array<number>-
[defaultValue]设置初始取值Array<number>[0, 0]
[disabled]值为 true 时，滑块为禁用状态booleanfalse
[onChange]当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入EventEmitter<Array<number>>-
[onAfterChange]与 ontouchend 触发时机一致，把当前值作为参数传入EventEmitter<Array<number>>-
[marks]刻度标记，key 的类型必须为 Number 且取值在闭区间 [min, max] 内{ [_: number]: string }{ }
[count]有几个区间块，比如有一个圆圈就是两个区间number1
[allowCross]是否允许两个handler(圆圈)互相穿越booleantrue
[pushable]两个触点之间的最小距离, 仅限allowCross为falsenumber-
[handleStyle]滑块的样式，按数组顺序应用到多滑块Array<object>-
[trackStyle]选中部分滑动条的样式，按数组顺序应用到滑动条的多区间Array<object>-
[railStyle]未选中部分object-
[(ngModel)]当前取值number-
(ngModelChange)当 Slider 的值发生改变时，会触发 ngModelChange 事件，并把改变后的值作为参数传入EventEmitter<Array<number>>-

代码演示

基本用法

最简单的用法。

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'demo-range-basic',
  5.   template: `
  6.     <div class="am-demo-page">
  7.       <div style="padding: 15px;font-size: 16px;">步骤条</div>
  8.       <div class="am-demo-bd am-wingblank am-wingblank-lg">
  9.         <div><div class="sub-title">Basic range ngModel</div></div>
  10.         <div>
  11.           <Range [ngModel]="valueModel" [min]="0" [max]="20" (ngModelChange)="changeModel($event)"> </Range>
  12.         </div>
  13.       </div>
  14.       <div class="am-demo-bd am-wingblank am-wingblank-lg">
  15.         <div><div class="sub-title">Basic range</div></div>
  16.         <div>
  17.           <Range
  18.             [defaultValue]="[3, 10]"
  19.             [min]="0"
  20.             [max]="20"
  21.             (onChange)="change($event)"
  22.             (onAfterChange)="afterChange($event)"
  23.           ></Range>
  24.         </div>
  25.       </div>
  26.       <div class="am-demo-bd am-wingblank am-wingblank-lg">
  27.         <div><div class="sub-title">Disabled range</div></div>
  28.         <div>
  29.           <Range
  30.             [defaultValue]="[3, 10]"
  31.             [min]="0"
  32.             [max]="20"
  33.             [disabled]="true"
  34.             (onChange)="change($event)"
  35.             (onAfterChange)="afterChange($event)"
  36.           ></Range>
  37.         </div>
  38.       </div>
  39.       <div class="am-demo-bd am-wingblank am-wingblank-lg">
  40.         <div><div class="sub-title">Range with customized style</div></div>
  41.         <div>
  42.           <Range
  43.             [defaultValue]="[3, 10]"
  44.             [min]="0"
  45.             [max]="20"
  46.             [trackStyle]="trackStyle"
  47.             [railStyle]="railStyle"
  48.             [handleStyle]="handleStyle"
  49.             (onChange)="change($event)"
  50.             (onAfterChange)="afterChange($event)"
  51.           ></Range>
  52.         </div>
  53.       </div>
  54.     </div>
  55.   `,
  56.   styles: [
  57.     `
  58.       .am-wingblank,
  59.       .am-wingblank-lg {
  60.         margin-left: 15px;
  61.         margin-right: 15px;
  62.         margin-bottom: 30px;
  63.       }
  64.       .sub-title {
  65.         color: #888;
  66.         font-size: 14px;
  67.         padding: 30px 0 18px 0;
  68.         margin: 0;
  69.       }
  70.     `
  71.   ]
  72. })
  73. export class DemoRangeBasicComponent {
  74.   value = [20, 50];
  75.   valueModel = [4, 8];
  76.   trackStyle = [{ 'background-color': 'red' }, { 'background-color': 'green' }];
  77.   railStyle = {
  78.     'background-color': 'black'
  79.   };
  80.   handleStyle = [{ 'background-color': 'yellow' }, { 'background-color': 'gray' }];
  82.   constructor() {}
  84.   change(e) {
  85.     console.log(e, 'change');
  86.   }
  88.   afterChange(e) {
  89.     console.log(e, 'afterChange');
  90.   }
  92.   changeModel(e) {
  93.     console.log(e, 'changeModel');
  94.     console.log(this.valueModel, 'valueModel');
  95.   }
  96. }

Range区域选择 - 图1