Slider滑动输入条

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

规则

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

Common API

参数说明类型默认值
[min]最小值number0
[max]最大值number100
[step]步长，取值必须大于 0，并且可被 (max - min) 整除。当 marks 不为空对象时，可以设置 step 为 null，此时 Slider 的可选值仅有 marks 标出来的部分number | null1
[value]设置当前取值number-
[defaultValue]设置初始取值number0
[disabled]值为 true 时，滑块为禁用状态booleanfalse
[marks]刻度标记，key 的类型必须为 number 且取值在闭区间 [min, max] 内{ [_: number]: string }{ }
[handleStyle]滑块的样式object-
[trackStyle]选中部分滑动条的样式object-
[railStyle]未选中部分object-
[(ngModel)]设置当前取值number-
(ngModelChange)当 Slider 的值发生改变时，会触发 ngModelChange 事件，并把改变后的值作为参数传入EventEmitter<number>-
(onChange)当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入EventEmitter<number>-
(onAfterChange)与 ontouchend 触发时机一致，把当前值作为参数传入EventEmitter<number>-

代码演示

基本用法

最简单的用法。

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

Slider滑动输入条 - 图1