I want to modify the values of a PrimeNG slider through two inputs. When the slider is not a range, it works fine, and I can control the slider from the input. However, when it comes to a range slider, it stops working, and I'm unable to control it from the inputs.
//Case 1: Input control works
<input type="text" pInputText [(ngModel)]="value"/>
<p-slider [(ngModel)]="value"></p-slider>
//Case 2: Inputs controls don't work
<input type="text" pInputText [(ngModel)]="values[0]" />
<p-slider [(ngModel)]="values" [range]="true"></p-slider>
<input type="text" pInputText [(ngModel)]="values[1]" />
If this doesn't work, how can I control a range slider from an input?
A similar issue was reported and the solution suggested by @Phil-DS on p-slider: when [range]='true', slider does not update when model changes.
Angular doesn't mutate a value in the array to be updated.
You have to create the new array for each time the <input> element was inputted/changed in order to allow the update to be effected.
<input
type="number"
pInputText
[(ngModel)]="values[0]"
class="w-full mb-3"
(input)="updateRange()"
/>
<br />
<p-slider [(ngModel)]="values" [range]="true" class="w-full"></p-slider>
<input
type="number"
pInputText
[(ngModel)]="values[1]"
class="w-full mt-3"
(input)="updateRange()" />
updateRange() {
this.values = [...this.values];
}