Range slider is not working

[janu1428]

Hi,

I am trying to use range slider. I have given connect attribute as true, but still able to see only single slider.
Kindly let me know what am i doing wrong. Below is my html tag

<nouislider [connect]="true" [min]="0" [max]="1500" [step]="100" [(ngModel)]="someRange" (ngModelChange)="rangeValueChanged($event)">

[scubed2010]

I'm having the same issue.

I'm running Angular CLI 1.3 with Angular 4.3.4.

Are there plans to update this package for Angular4?

[kiqq]

Make sure type of someRange is number[]:
someRange: number[] = [100, 1000];

[connect]="true" sets background-color for space in chosen ranges, more info:
https://refreshless.com/nouislider/slider-values#section-handles-multiple

[fergalddaly]

Any chance of somebody providing a proper description on the steps to use this with Webpack?
Think that is missing from the docs.
A lot of issues being logged.

[kiqq]

I'm not so sure if I'm a proper person to do this (not much experience), but let me rewrite README's parts that applies to Angular 4/5 here in (maybe) simpler to understand form:

1. Run in terminal in your project's directory: npm i --save nouislider ng2-nouislider
2. Import css styles for slider (choose a or b):
   a) to projectPath/src/styles.css add: @import "~nouislider/distribute/nouislider.min.css";
   b) in projectPath/.angular-cli.json change:

"styles": [
        "styles.css"
],

to

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

and rerun ng serve if webserver was started.
3. In projectPath/src/app/app.module.ts:

import { NouisliderModule } from 'ng2-nouislider'; //add this!!!!!!

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    NouisliderModule //add this!!!!!
})
export class AppModule {
}

4. Now we can use <nouislider></nouislider> component in our own components.
   Check demos to see how: http://tb.github.io/ng2-nouislider/
   Check nouislider site to see all possibilities we can use: https://refreshless.com/nouislider/

[fergalddaly]

The issue that I had related to the css.
I eventually figured out that 2 (b) was the issue.
Good to have a guide.
I'm sure others will see this and it will resolve their issue.
Slider is working great now.

[kiqq]

You are welcome. Great to know it solved your problem. I wish you happy sliding :)