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 :)