Topic: Range input (slider) delayed when displaying value
Currently using the range-slider [value] from the api like this:
<mdb-range-input value="100" min="0" max="100"></mdb-range-input>
On page load the slider is set to zero, but after a delay it sets to the amount of the value. Sometimes the value won't reflect on the slider unless I mouse over the slider area.
I need that value to appear on page load and I'm not quite sure why there is a delay.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Opened
Specification of the issue
- ForumUser: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 10.0.0
- Device: Desktop
- Browser: Chrome
- OS: OSX
- Provided sample code: Yes
- Provided link: No
Arkadiusz Idzikowski staff commented 3 years ago
On which browser and version did you test that? Do you somehow modify the Angular change detection mechanism in your app?
Nate free commented 3 years ago
I'm using version 10.0 of MDB, and version 86 of Chrome. I use a lifecycle hook ngAfterContentChecked() but has nothing to do with the range slider. Though even if I disable that lifecycle hook it still has the same loading behavior.
Grzegorz Bujański staff commented 3 years ago
How can we reproduce this error?
Nate free commented 3 years ago
Well that's why I was asking you guys... I'm not using the range slider with anything weird, just using it as its supposed to be used according to the documentation. I posted the code of my range input. You tell me if I'm not using something correctly, but it has a delay on load and strangely loads on mouse hover.
By asking "How can we reproduce this error?" are you admitting you have never seen this bug before?
Arkadiusz Idzikowski staff commented 3 years ago
We are not aware of such a problem in the range component and we couldn't reproduce it on our end. That's why we need some more information about the HTML/TS code that you use in this case (the best way to include it would be to edit the first post).
Nate free commented 3 years ago
Sorry that was not for the slider I was having problems with, it was this one:
<mdb-range-input [(ngModel)]="displayIntensity" min="0" max="100"></mdb-range-input>It seems that it has a delay issue when using
[(ngModel)]. I replaced it using[value]instead and it seems the delay is gone. I can confirm it was[(ngModel)]causing the delay.*However, without using
[(ngModel)]I can't detect changes from the slider anymore. I am using(rangeValueChange)to detect changes currently but I have to write a method for each slider so it's not exactly as scaleable of a solution as[(ngModel)]is. Hoping you can re-create this issue now and help me to get ngModel working again.Arkadiusz Idzikowski staff commented 3 years ago
Thank you, this information was very helpful and we managed to reproduce this bug. We still need to take a closer look at that to find the cause of the problem. We will let you know what we found.