封装了一个比例不均匀的滑动条

一个不均匀比例的滑动条，框架使用的是ng7。复杂的地方是需要计算滑块距离左边的距离占全长的百分比，判断当前滑块在第几段。

效果图

可拖动可输入

代码

HTML slider.component.html

<div class="app-slider" [class.slider-unmove]="unmove" [class.disabled]="disabled" (click)="clickSlider($event)">
  <ul class="bk">
    <li style="width: 16px;"></li>
    <li *ngFor="let item of data;"
        class="slider-item"
        [ngStyle]="{flex: item.width}">
      <span [textContent]="item.count + options.unit" class="text"></span>
    </li>
  </ul>
  <div class="slider-drag"
       [style.left.px]="left"
       (mousedown)="down($event)"></div>
  <div class="moved-bk" [style.width.px]="left"></div>
  <div class="slider-input" *ngIf="options.showInput">
    <input type="number"
           [min]="min"
           [max]="max"
           [(ngModel)]="value"
           (ngModelChange)="changeValue()" />
    <div class="btns">
      <span class="add" (click)="value = value + options.step; changeValue();"><i></i></span>
      <span class="sub" (click)="value = value - options.step; changeValue();"><i></i></span>
    </div>
    <div class="unit" [textContent]="options.unit"></div>
  </div>
</div>

定义所需配置参数接口 interface

export interface OptionsDataModel {
   
  count: number; // 当前段的数值
  width: number; // 当前段所占比例 0~100 总和应为100
}

export interface OptiopnsModel {
   
  unit: string; // 单位
  step: number;
  showInput: boolean; // 是否显示input
  min?: number; // 最小值
  max?: number; // 最大值
  data: OptionsDataModel[];
}

ts slider.component.ts

import {
    Component, Input, OnInit