Slider: valueChange triggered when setting min/max value


#1

Hi,

When setting a min of max value via javascript (Angular) for a Slider, the valueChange event is also triggered.
Is there a way to detect whether the valueChange event is triggered by this or is triggered by a real user operation?
I’m passing the event as PropertyChangeData.

Kind regards,
Rowdy


#2

Are you checking the eventName ?


#3

Unfortunately the event name is valueChange in all cases.


#4

Working on a solution in TS with

this.myslider.nativeElement.addEventListener(‘valueChange’, (args: PropertyChangeData) => {});

instead of

(valueChange)=“updateValues($event)”

in XML

Got it working for 90%, unfortunately doesn’t get a Label updated with a the new value yet.
One way binding or rather updating the view doesn’t seem to work when triggered in the callback above.


#5

Hi Rowdy,

if you inject the changeDetectorRef in your constructor and call detectChanges on it in your callback it should update your Label.

import { ChangeDetectorRef } from "@angular/core";

constructor(private _changeDetectorRef:ChangeDetectorRef) {
    
}

onValueChangeCallback() {
    // your code
   this._changeDetectorRef.detectChanges();
}

#6

Awesome Theo, that does the trick!

I’ll will report the weird behaviour/bug to the core team, but in the meantime this is my solution:

<ActionBar title=“Slider”></ActionBar>
<StackLayout class=“display”>
<StackLayout orientation=“horizontal” horizontalAlignment=“center”>
<Label text="{{currentValue}}"></Label>
</StackLayout>
<Slider #myslider [(ngModel)]=“currentValue” minValue="{{minValue}}" maxValue="{{maxValue}}"></Slider>
<GridLayout rows="" columns=" *">
<Label [text]=“minValue” row=“0” col=“0” horizontalAlignment=“left” textWrap=“true”></Label>
<Label [text]=“maxValue” row=“0” col=“1” horizontalAlignment=“right” textWrap=“true”></Label>
</GridLayout>
</StackLayout>

import { Component, OnInit, AfterViewInit, ViewChild, ElementRef, ChangeDetectorRef } from “@angular/core”;
import { PropertyChangeData } from “data/observable”;

import * as Platform from “platform”;

@Component({
selector: “my-app”,
templateUrl: “app.component.html”,
})
export class AppComponent implements OnInit {

startValue: number;
currentValue: number;
minValue: number;
maxValue: number;

@ViewChild("myslider") myslider: ElementRef;

constructor(private _changeDetectorRef: ChangeDetectorRef) {
}

ngOnInit() {
    this.startValue = Math.round(Math.random() * 10000);
    this.minValue = this.startValue - 100;
    this.maxValue = this.startValue + 100;
    this.currentValue = this.startValue;
}

ngAfterViewInit() {
    this.myslider.nativeElement.value = this.startValue;
    this.myslider.nativeElement.addEventListener('valueChange', (args: PropertyChangeData) => {
        this.currentValue = Math.round(args.value);
        this._changeDetectorRef.detectChanges();
    });
}

}


#7

Glad it’s working for you :slight_smile:

The reason your view is not automatically updated is because you use the addEventListener. Angular does not know when this is triggered and that is why you have to trigger the change detection yourself.


#8

Thanks for the explanation too!