Angular 5 DOM two way binding input number and slider

Question

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>

depiction · Accepted Answer · 2018-02-04 01:49:20Z

1

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>

answered Feb 4, 2018 at 1:49

depiction

8198 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular 5 DOM two way binding input number and slider

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related