Range区域选择

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

规则

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

Common API

属性类型默认值说明
ngModelNumber设置当前取值，可双向绑定。
ngModelChangeFunctionNoop当 Slider 的值发生改变时，会触发 ngModelChange 事件，并把改变后的值作为参数传入。
minNumber0最小值
maxNumber100最大值
stepNumber or null1步长，取值必须大于 0，并且可被 (max - min) 整除。当 marks 不为空对象时，可以设置 step 为 null，此时 Slider 的可选值仅有 marks 标出来的部分。
value[Number, Number]-设置当前取值。
defaultValue[Number, Number][0, 0]设置初始取值。
disabledBooleanfalse值为 true 时，滑块为禁用状态
onChangeFunctionNoop当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入。
onAfterChangeFunctionNoop与 ontouchend 触发时机一致，把当前值作为参数传入。
marksObject{Number:String}{ }刻度标记，key 的类型必须为 Number 且取值在闭区间 [min, max] 内
countnumber1Determine how many ranges to render, and multiple handles will be rendered (number + 1).
allowCrossbooleantrueallowCross could be set as true to allow those handles to cross.
pushablenumberminimum ensured distance between handles
handleStyleArray[Object]-滑块的样式，按数组顺序应用到多滑块
trackStyleArray[Object]-选中部分滑动条的样式，按数组顺序应用到滑动条的多区间
railStyleObject-未选中部分

代码演示

基本用法

最简单的用法。

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

Range 区域选择 - 图1