• Range区域选择
    • 规则
  • Common API
  • 代码演示

    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