• Slider滑动输入条
    • 规则
  • Common API
  • 代码演示

    Slider滑动输入条

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

    规则

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

    Common API

    属性类型默认值说明
    ngModelNumber设置当前取值，可双向绑定。
    ngModelChangeFunctionNoop当 Slider 的值发生改变时，会触发 ngModelChange 事件，并把改变后的值作为参数传入。
    minNumber0最小值
    maxNumber100最大值
    stepNumber or null1步长，取值必须大于 0，并且可被 (max - min) 整除。当 marks 不为空对象时，可以设置 step 为 null，此时 Slider 的可选值仅有 marks 标出来的部分。
    valueNumber设置当前取值。
    defaultValueNumber0设置初始取值。
    disabledBooleanfalse值为 true 时，滑块为禁用状态
    onChangeFunctionNoop当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入。
    onAfterChangeFunctionNoop与 ontouchend 触发时机一致，把当前值作为参数传入。
    marksObject{Number:String}{ }刻度标记，key 的类型必须为 Number 且取值在闭区间 [min, max] 内
    handleStyleObject-滑块的样式
    trackStyleObject-选中部分滑动条的样式
    railStyleObject-未选中部分

    代码演示

    基本用法

    最简单的用法。

    1. import { Component, OnInit } from '@angular/core';
    3. @Component({
    4.   selector: 'demo-slider-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>
    10.             <div class="sub-title">Small size ngModel</div>
    11.           </div>
    12.           <div>
    13.             <Slider [ngModel]="value"
    14.                     [min]=-10
    15.                     [max]=100
    16.                     (ngModelChange)="change($event)"
    17.                     (onAfterChange)="afterChange($event)"
    18.             ></Slider>
    19.           </div>
    20.       </div>
    21.       <div class="am-demo-bd am-wingblank am-wingblank-lg">
    22.           <div>
    23.             <div class="sub-title">Small size</div>
    24.           </div>
    25.           <div>
    26.             <Slider [defaultValue]=26
    27.                     [min]=-10
    28.                     [max]=100
    29.                     (onChange)="change($event)"
    30.                     (onAfterChange)="afterChange($event)"
    31.             ></Slider>
    32.           </div>
    33.       </div>
    34.       <div class="am-demo-bd am-wingblank am-wingblank-lg">
    35.           <div>
    36.               <div class="sub-title">Disabled slider</div>
    37.           </div>
    38.           <div>
    39.             <Slider [defaultValue]=26
    40.                     [min]=0
    41.                     [max]=30
    42.                     [disabled]=true
    43.             ></Slider>
    44.           </div>
    45.       </div>
    46.       <div class="am-demo-bd am-wingblank am-wingblank-lg">
    47.           <div>
    48.               <div class="sub-title">slider with customized color</div>
    49.           </div>
    50.           <div>
    51.             <Slider [defaultValue]=26
    52.                     [min]=0
    53.                     [max]=30
    54.                     [trackStyle]="trackStyle"
    55.                     [railStyle]="railStyle"
    56.                     [handleStyle]="handleStyle"
    57.             ></Slider>
    58.           </div>
    59.       </div>
    60.     </div>
    61.   `,
    62.   styles: [
    63.     `
    64.       .am-wingblank,
    65.       .am-wingblank-lg {
    66.         margin-left: 15px;
    67.         margin-right: 15px;
    68.         margin-bottom: 30px;
    69.       }
    70.       .sub-title {
    71.         color: #888;
    72.         font-size: 14px;
    73.         padding: 30px 0 18px 0;
    74.         margin: 0;
    75.       }
    76.     `
    77.   ]
    78. })
    79. export class DemoSliderBasicComponent implements OnInit {
    80.   value = 3;
    81.   trackStyle;
    82.   railStyle;
    83.   handleStyle;
    84.   marks;
    86.   constructor() {}
    88.   change(event) {
    89.     console.log(event, 'change');
    90.   }
    92.   afterChange(event) {
    93.     console.log(event, 'afterChange');
    94.   }
    96.   ngOnInit() {
    97.     this.trackStyle = {
    98.       'background-color': 'red',
    99.       height: '5px'
    100.     };
    101.     this.railStyle = {
    102.       'background-color': 'blue',
    103.       height: '5px'
    104.     };
    105.     this.handleStyle = {
    106.       'border-color': 'blue',
    107.       height: '14px',
    108.       width: '14px',
    109.       'margin-left': '-7px',
    110.       'margin-top': '-4.5px',
    111.       'background-color': 'blue'
    112.     };
    113.     this.marks = {
    114.       '-10': '-10°C',
    115.       0: `<strong>0°C</strong>`,
    116.       26: '26°C',
    117.       37: '37°C',
    118.       50: '50°C',
    119.       100: {
    120.         style: {
    121.           color: 'red'
    122.         },
    123.         label: `<strong>100°C</strong>`
    124.       }
    125.     };
    126.   }
    127. }

    Slider 滑动输入条 - 图1