v2.0.0 re-branded the slider component from ng5-slider to ngx-slider, putting it under a different NPM namespace.
The upgrade process is relatively straightforward, with mostly cosmetic changes of finding "ng5" and replacing it with "ngx".
This is a step-by-step guide to doing this:
- Change the package name
ng5-slider
->@angular-slider/ngx-slider
in yourpackage.json
:
Before:
"dependencies": {
"ng5-slider": "^1.x.x",
// ...
}
After:
"dependencies": {
"@angular-slider/ngx-slider": "^2.0.0",
// ...
}
-
Run
npm install
to pull the new package. -
Replace reference to slider module
Ng5SliderModule
->NgxSliderModule
in yourapp.module.ts
:
Before:
import { Ng5SliderModule } from 'ng5-slider';
...
@NgModule({
...
imports: [
...
Ng5SliderModule,
...
],
...
})
export class AppModule {}
After:
import { NgxSliderModule } from '@angular-slider/ngx-slider';
...
@NgModule({
...
imports: [
...
NgxSliderModule,
...
],
...
})
export class AppModule {}
- Rename all slider imports in your Typescript files
import ... from 'ng5-slider'
->import ... from '@angular-slider/ngx-slider'
:
Before:
import { Options } from 'ng5-slider';
...
export class MyComponent {
...
options: Options = {
floor: 0,
ceil: 100
};
}
After:
import { Options } from '@angular-slider/ngx-slider';
...
export class MyComponent {
...
options: Options = {
floor: 0,
ceil: 100
};
}
- Rename all usages of slider directive
<ng5-slider>
-><ngx-slider>
in your HTML templates:
Before:
<ng5-slider [(value)]="value" [options]="options"></ng5-slider>
After:
<ngx-slider [(value)]="value" [options]="options"></ngx-slider>
- If you use custom CSS styling for the slider, replace
ng5
->ngx
in the CSS class names.
Before:
.custom-slider {
.ng5-slider {
.ng5-slider-selection {
background: rgb(255, 255, 0) !important;
}
}
}
After:
.custom-slider {
.ngx-slider {
.ngx-slider-selection {
background: rgb(255, 255, 0) !important;
}
}
}
- Try building and running your app. If there are no errors, you should be all good to go!