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

    Slider滑动输入条

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

    规则

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

    Common API

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

    代码演示

    基本用法

    最简单的用法。

    1. import { Component, OnInit } from '@angular/core';
    2. @Component({
    3. selector: 'demo-slider-basic',
    4. template: `
    5. <div class="am-demo-page">
    6. <div style="padding: 15px;font-size: 16px;">步骤条</div>
    7. <div class="am-demo-bd am-wingblank am-wingblank-lg">
    8. <div>
    9. <div class="sub-title">Small size ngModel</div>
    10. </div>
    11. <div>
    12. <Slider [ngModel]="value"
    13. [min]=-10
    14. [max]=100
    15. (ngModelChange)="change($event)"
    16. (onAfterChange)="afterChange($event)"
    17. ></Slider>
    18. </div>
    19. </div>
    20. <div class="am-demo-bd am-wingblank am-wingblank-lg">
    21. <div>
    22. <div class="sub-title">Small size</div>
    23. </div>
    24. <div>
    25. <Slider [defaultValue]=26
    26. [min]=-10
    27. [max]=100
    28. (onChange)="change($event)"
    29. (onAfterChange)="afterChange($event)"
    30. ></Slider>
    31. </div>
    32. </div>
    33. <div class="am-demo-bd am-wingblank am-wingblank-lg">
    34. <div>
    35. <div class="sub-title">Disabled slider</div>
    36. </div>
    37. <div>
    38. <Slider [defaultValue]=26
    39. [min]=0
    40. [max]=30
    41. [disabled]=true
    42. ></Slider>
    43. </div>
    44. </div>
    45. <div class="am-demo-bd am-wingblank am-wingblank-lg">
    46. <div>
    47. <div class="sub-title">slider with customized color</div>
    48. </div>
    49. <div>
    50. <Slider [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;
    84. constructor() {}
    85. change(event) {
    86. console.log(event, 'change');
    87. }
    88. afterChange(event) {
    89. console.log(event, 'afterChange');
    90. }
    91. ngOnInit() {
    92. this.trackStyle = {
    93. 'background-color': 'red',
    94. height: '5px'
    95. };
    96. this.railStyle = {
    97. 'background-color': 'blue',
    98. height: '5px'
    99. };
    100. this.handleStyle = {
    101. 'border-color': 'blue',
    102. height: '14px',
    103. width: '14px',
    104. 'margin-left': '-7px',
    105. 'margin-top': '-4.5px',
    106. 'background-color': 'blue'
    107. };
    108. this.marks = {
    109. '-10': '-10°C',
    110. 0: `<strong>0°C</strong>`,
    111. 26: '26°C',
    112. 37: '37°C',
    113. 50: '50°C',
    114. 100: {
    115. style: {
    116. color: 'red'
    117. },
    118. label: `<strong>100°C</strong>`
    119. }
    120. };
    121. }
    122. }

    Slider 滑动输入条 - 图1