CODEWITHSUNDEEP
javascriptangulartypescript
Dave
Dave

Reputation: 95

Angular 5 DOM two way binding input number and slider

I try to use a slider and input of type number at the same time. I create the objects in runtime so I would like to do it just in the DOM. If I change the value of the slider the input gets the same value but not the other way around. And also there is not value in the input number in the beginning.

    ..
    *ngFor="let vk of selectedVK"
    ..
   <div class="row">
    <div class="col-md-7">
        <input 
            type="range"
            ngModel
            name="slider"
            #slider="ngModel"
            min="0" 
            max="{{vk.max}}" 
            step="10" 
            value="{{vk.max/2}}"/>
    </div>
    <div class="col-md-5">
        <input 
        type="number"
        class="form-control"
        [value]="slider.value"
        max="{{vk.max}}"
        min=0>
    </div>

    <p>{{slider.value}}</p>
 </div>

Upvotes: 0

Views: 1927

Answers (1)

depiction
depiction

Reputation: 819

You need to use two-way data binding.

With two-way data binding, when properties in the model get updated, so does the UI. When UI elements get updated, the changes get propagated back to the model.

<input 
    type="number"
    class="form-control"
    [(ngModel)]="slider.value"
    max="{{vk.max}}"
    min=0>

Upvotes: 1

Related Questions