确保已安装@ionic/angular和@ionic-native/slider插件：

npm install @ionic/angular @ionic-native/slider

在app.module.ts中导入Slider和IonicModule：

import { NgModule } from '@angular/core'; import { IonicModule } from '@ionic/angular'; import { Slider } from '@ionic-native/slider/ngx';

@NgModule({ declarations: [AppComponent], entryComponents: [], imports: [BrowserModule, IonicModule.forRoot(), FormsModule, RouterModule.forRoot(routes)], providers: [StatusBar, SplashScreen, { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }, Slider], bootstrap: [AppComponent] }) export class AppModule { }

在组件中使用Slider：

import { Component } from '@angular/core'; import { Slider } from '@ionic-native/slider/ngx';

@Component({ selector: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scss'], }) export class HomePage {

constructor(private slider: Slider) {}

onChange(value: number) { console.log(value); }

openSlider() { this.slider.create({ min: 0, max: 100, step: 1, value: 50 }).on('change', (value: number) => this.onChange(value)) .present(); } }

在HTML中使用ion-content添加一个按钮来打开Slider：

Open Slider