Angular 5.2.1 - slider doesn't show

[zHaytam]

Hello, I was looking for a good looking slider for my project and I found this one but the slider doesn't show and I'm not sure wheither it's my fault or not.

app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NouisliderModule } from 'ng2-nouislider';
import { AppComponent } from './app.component';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        NouisliderModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

app.component.css:

@import "~nouislider/distribute/nouislider.min.css";
...

app.component.html:

<nouislider [connect]="true" [min]="0" [max]="15" [(ngModel)]="inputSpeedRange"></nouislider>

app.component.ts:

public inputSpeedRange = [4, 80];

[kiqq]

Move @import "~nouislider/distribute/nouislider.min.css"; to styles.css.

[zHaytam]

Thank you, it worked!

[zHaytam]

I changed the inputSpeedRange to public inputSpeed = 20;

The problem is, the inputSpeed doesn't get updated (not like in the demo) and I have to do this little "hack" to make it work: <nouislider [min]="4" [max]="80" [step]="1" [(ngModel)]="inputSpeed" (change)="inputSpeed = $event"></nouislider>

Is this a known issue or am I (again) doing something wrong? Thank you.

[kiqq]

Do you have FormsModule imported in app.module.ts?

[zHaytam]

Perfect, thank you for the help!

Do you mind me asking why does it need FormsModule in this case?

[kiqq]

NgModel directive is a part of FormsModule: https://github.com/angular/angular/blob/master/packages/forms/src/form_providers.ts:

import {InternalFormsSharedModule, REACTIVE_DRIVEN_DIRECTIVES, TEMPLATE_DRIVEN_DIRECTIVES} from './directives';

@NgModule({
  declarations: TEMPLATE_DRIVEN_DIRECTIVES,
  providers: [RadioControlRegistry],
  exports: [InternalFormsSharedModule, TEMPLATE_DRIVEN_DIRECTIVES]
})
export class FormsModule {
}

https://github.com/angular/angular/blob/master/packages/forms/src/directives.ts: export const TEMPLATE_DRIVEN_DIRECTIVES: Type<any>[] = [NgModel, NgModelGroup, NgForm];

[zHaytam]

Oh, got it! Thank you for your time.

[arjunkolagatla]

Hi All,

How to get two handles like attachment? Any help would be appreciated. Thanks

[arjunkolagatla]

Sorry, I just did figured out by change public inputSpeed = [10,20]; Just that variable name "inputSpeed" is confusion, you can change to range or something else.

Thanks