How to make non-linear input range at angular4?

Issue

I have an input tag like

<input
      #sliderInput
      id="slider"
      [attr.min]="slider.min"
      [attr.Max]="slider.max"
      [attr.step]="slider.stepSize"
      type="range"
      [(ngModel)]="slider.value"
      (input)="onInputSlider()"
      [attr.disabled]="slider.isDisabled ? '' : null"
/>

How to make this input field with non-linear values? I have an array -> [3, 6, 9, 12, 15, 18, 24, 36, 48];

Solution

Using cdk-drag can be make the things more "easy"

just add two functions:

  evaluatePosition=(posContainer:any,dragRef:any)=>
  {
    const {
      width,
      height
    } = this.indicator.nativeElement.getBoundingClientRect();
    const pos =
            this.values[0] + (this.range * (posContainer.x - this.pos.x)) / this.pos.width;
          const max = this.values[this.values.length - 1];
          const value = this.values.reduce((a, b) => {
            return Math.abs(a - pos) > Math.abs(b - pos) ? b : a;
          }, max);
          const left =
      ((value - this.values[0]) * this.pos.width) / this.range+this.incr.x
      this.renderer.setStyle(
        this.lineBlue.nativeElement,
        'width',((left + this.size.width-width/2)>0?
        left + this.size.width-width/2:0) + 'px'
      );
      const rect = this.container.nativeElement.getBoundingClientRect();
      this.ngZone.run(()=>{
        this.value = value;

      })
    return {x:left+rect.x,y:pos.y};
  }
  initDrag(event:any)
  {
    const rect=this.indicator.nativeElement.getBoundingClientRect()
    this.incr={x:event.clientX-rect.x-rect.width/2,y:event.clientY-rect.y-rect.height/2} 
    this.onDrag=true;
  }

and the .html like

<div #container class="container">
  <div class="line"></div>
  <div #line class="line-blue" [style.background]="background"></div>
  <ng-container *ngIf="showMarks && values && values.length">
    <div
      #mark
      *ngFor="let value of (values | slice: 1:values.length - 1)"
      class="mark"
      [style.background]="markBackground"
    ></div>
  </ng-container>
  <div cdkDrag
    #indicator
    class="indicator"
    [style.background]="background"
    (mousedown)=initDrag($event)
    (cdkDragEnded)="onDrag=false"
    [cdkDragConstrainPosition]="evaluatePosition"
    cdkDragLockAxis="x"
  >
    <span
      *ngIf="showValue == 'always' || (onDrag && showValue == 'auto')"
      >{{ value }}</span
    >
  </div>
</div>

see the stackblitz

Answered By - Eliseo