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