要创建一个Angular 2+的缩放滑块,你可以使用Angular Material组件库中的MatSlider组件。下面是一个示例解决方案:
npm install @angular/material @angular/cdk
import { NgModule } from '@angular/core';
import { MatSliderModule } from '@angular/material/slider';
@NgModule({
imports: [
MatSliderModule
]
})
export class AppModule { }
import { Component } from '@angular/core';
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.css']
})
export class ExampleComponent {
zoomValue: number = 50;
// 在需要的地方使用zoomValue的值
doSomething() {
console.log('Zoom value:', this.zoomValue);
}
}
这样,你就创建了一个简单的Angular 2+缩放滑块。你可以根据需要调整滑块的最小值(min),最大值(max)和步长(step)。