Primeng: Slider fails with big values

[lebnic]

I'm submitting a ... (check one with "x")

[x] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports)
http://plnkr.co/edit/CXRMVxB6gGMtdPCtY5D6

Current behavior

When slider is configured with step & min / max, value does not follow cursor/ Instead, it drags behind...

Expected behavior

Slider should follow mouse position at all time.

Minimal reproduction of the problem with instructions

See plunker above

What is the motivation / use case for changing the behavior?

Poor user experience; slider with steps is not working well...

Please tell us about your environment:

Linux

• Angular version: 2.0.X
  
  3.10

• PrimeNG version: 2.0.X
  
  2.0.0

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
  
  Chrome

• Language: [all | TypeScript X.X | ES6/7 | ES5]

• Node (for AoT issues): node --version =

[cagataycivici]

This should be fixed in recent PrimeNG release, please try with it and if the issue persists drop a comment with along with a test case based on plunkr below and we'll review again.

http://plnkr.co/edit/Wj39h1?p=preview

[birop]

It can be reproduced with the plunker below:

http://plnkr.co/edit/CXRMVxB6gGMtdPCtY5D6

[SergeySagan]

This should not be closed! It is still an issue! Please reopen and fix!

[playnox]

Same here... the faster you go - the more async it becomes with cursor.
Any suggestions ?

[SergeySagan]

This is the hack I had to write to fix this:

export class MyComponent implements OnInit, OnDestroy {
    readonly sliderMinimum = 1;
    readonly sliderMaximum = 250;

    private isMouseDown = false;
    private listenerMove: Function;
    private listenerUp: Function;
    private listenerLeave: Function;
    @ViewChild('slider') slider: ElementRef;

    constructor(private renderer: Renderer) { }

    ngOnInit() {
        // handle slider mouse events
        this.listenerMove = this.renderer.listen('document', 'mousemove', (event: MouseEvent) => { this.onMouseMove(event); })
        this.listenerUp = this.renderer.listen('document', 'mouseup', (event: MouseEvent) => { this.isMouseDown = false; })
        this.listenerLeave = this.renderer.listen('document', 'mouseleave', (event: MouseEvent) => { this.isMouseDown = false; })
    }

    ngOnDestroy() {
        this.listenerMove();
        this.listenerUp();
        this.listenerLeave();
    }

    onMouseMove(event: MouseEvent, isOverride = false) {
        if (!this.isMouseDown && !isOverride)
                return;

        if (isNaN((<any>this.slider).initX)) {
            /*
                This nasty hack (along with isOverride) is needed because slider's values (like initX)
                are undefined until after first click on it
            */
            setTimeout((event: MouseEvent) => { this.onMouseMove(event, true); }, 100, event);
            return;
        }

        let relativeX = event.clientX - (<any>this.slider).initX;
        let width = (<any>this.slider).barWidth;

        let amount = Math.ceil((relativeX / width) * this.sliderMaximum);
        amount = amount < this.sliderMinimum ? this.sliderMinimum : amount;
        amount = amount > this.sliderMaximum ? this.sliderMaximum : amount;

        this.selectedAmount = amount;
    }

    onSliderClick(isMouseDown: boolean, event: MouseEvent) {
        this.isMouseDown = isMouseDown;

        this.onMouseMove(event);
    }

There are probably opportunities for cleanup here, but I was going fast... hope it helps you. Let me know if you see something I can do better here, especially the setTimeout hack

[lebnic]

Actually, this seems like a duplicate of: https://github.com/primefaces/primeng/issues/3556

[cagataycivici]

4389e8f and 4f21128 seems to fix this, I've tested various cases, appreciate your feedback on 4.2.2.

[lebnic]

@cagataycivici Here's my feedback on 4.2.2 : It works :+1: