ng5-slider high value sets in wrong position

Question

I'm using ng5-sliders in mat-menu but the high value of each slider sets in wrong position, not on the edge of slider.

I tried some solutions eg. manual refresh but it doesn't work

There is example on stackblitz

Answer 1

I was facing same issue. Just increase your timeout to 200 & it resolved.

import { Component, OnInit, EventEmitter } from '@angular/core';
import { Options } from 'ng5-slider';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  displayMenu = true;
filterElement = [
      {
        value: 0,
        highValue: 15,
        options: {
          floor: 0,
          ceil: 15,
          step: 0.1
        },
      },
      {
        value: 1,
        highValue: 1200,
        options: {
          floor: 1,
          ceil: 1200,
        },
      }];
  manualRefresh: EventEmitter<void> = new EventEmitter<void>();

  ngOnInit() {
  }
  noClickable($event: MouseEvent) {
    $event.stopPropagation();
  }
  onMenuOpen() {
      this.displayMenu = true;
  }
  menuToggle(value: boolean) {

    setTimeout(() => {
        console.log('Test');
        this.manualRefresh.emit();
    }, 200);

  }
}

Here is the resource link where I have just change the timeout from 100 to 200

https://stackblitz.com/edit/angular-8c46ta