Model isn't binding in Angular 5

[keyanrazi]

I've been going through the demos and other issues here, but I'm not able to replicate the control in my project using Ang 5 correctly. While the control renders and functions AND the value is correctly displayed in text and on the slider onload, it's not updating my model or firing the change events.

Here's a quick example:

Initial View:

After changing values:

HTML:

{{ sliderValue }}

<nouislider [min]="100" [max]="350" [step]="20" 
[(ngModel)]="sliderValue" (ngModelChange)="coverageAChange($event)"></nouislider>

TS:

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { NouisliderComponent } from 'ng2-nouislider';

@Component({
  selector: 'app-quote',
  templateUrl: './quote.component.html',
  styleUrls: ['./quote.component.scss'],
})

export class QuoteComponent implements OnInit {


  sliderValue = 140;

  constructor() {
  }

  ngOnInit() {
  }


  coverageAChange(value) {
    console.log(value);
  };

app.module.ts:

import { NouisliderModule } from 'ng2-nouislider';

imports: [
   ....,
    NouisliderModule
  ],

.angular-cli.json:

  "styles": [
        .....,
        "../node_modules/nouislider/distribute/nouislider.min.css",
      ],

Any help would be appreciated. Thanks!

[brightonvino]

The demo "Single Value" does not respond to Button Clicks. [(ngModel]] binding does not seem to work

[kiqq]

https://github.com/tb/ng2-nouislider/issues/157#issuecomment-362845759 Let me know if it solves your problem.

[tessGrant]

I've changed (ngModelChange)="setValue($event) to (change)="setValue($event)" and it works for me.

[riazXrazor]

@tessGrant tnx worked for me too