ion RangeSlider:在自定义值的情况下自定义网格

npm install ion-range-slider --save

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { RangeSliderModule } from 'ion-range-slider';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    Range-Control-RangeSliderModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

<ion-range-slider
  [(ngModel)]="sliderValue"
  [min]="0"
  [max]="100"
  [step]="10"
  [grid]="true"
  [gridNum]="5"
  [gridLabels]="true"
  (ionChange)="onSliderChange($event)">
</ion-range-slider>

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  sliderValue: number;

  onSliderChange(event: any): void {
    console.log('Slider value:', this.sliderValue);
  }
}