如何用Puppeteer按5%步长操控范围滑块实现筛选？

核心思路 #

针对Angular Material的范围滑块，通过双向绑定滑块值数组同步控制左右滑块移动，确保增量为总范围的5%，且滑块间距始终维持在总范围的5%-10%区间内。

1. 模板层（HTML）配置滑块 #

定义基础范围滑块，绑定值数组和变更事件，同时添加增量/减量触发按钮：

<mat-slider
  [min]="0"
  [max]="100"
  [step]="1"
  [value]="sliderRange"
  (valueChange)="onSliderChange($event)"
  discrete
  showTickMarks
  tickInterval="10">
</mat-slider>

<button mat-button (click)="increaseRange()">+5% 范围</button>
<button mat-button (click)="decreaseRange()">-5% 范围</button>

2. 组件层（TS）实现逻辑控制 #

在组件类中定义变量和核心函数，处理增量计算、滑块同步移动和间距校验：

import { Component } from '@angular/core';
import { MatSliderChange } from '@angular/material/slider';

@Component({
  selector: 'app-range-slider',
  templateUrl: './range-slider.component.html',
  styleUrls: ['./range-slider.component.css']
})
export class RangeSliderComponent {
  // 初始范围（示例：20%-30%，间距10%）
  sliderRange: [number, number] = [20, 30];
  // 滑块总范围（可根据业务需求调整，此处用0-100对应百分比）
  totalRange = 100;
  // 增量比例（固定5%）
  incrementPercent = 5;
  // 最小/最大间距比例
  minGapPercent = 5;
  maxGapPercent = 10;

  // 计算增量对应的数值
  get incrementValue(): number {
    return (this.totalRange * this.incrementPercent) / 100;
  }

  // 计算最小/最大间距对应的数值
  get minGapValue(): number {
    return (this.totalRange * this.minGapPercent) / 100;
  }
  get maxGapValue(): number {
    return (this.totalRange * this.maxGapPercent) / 100;
  }

  // 范围增量：左右滑块同步右移（保持原有间距）
  increaseRange(): void {
    const [left, right] = this.sliderRange;
    const newLeft = left + this.incrementValue;
    const newRight = right + this.incrementValue;

    // 右边界校验：若右滑块超出最大值，调整左滑块到最大允许范围
    if (newRight > this.totalRange) {
      const maxAllowedRight = this.totalRange;
      const maxAllowedLeft = maxAllowedRight - this.currentGap;
      this.sliderRange = [maxAllowedLeft, maxAllowedRight];
      return;
    }

    this.sliderRange = [newLeft, newRight];
    this.validateGap();
  }

  // 范围减量：左右滑块同步左移（保持原有间距）
  decreaseRange(): void {
    const [left, right] = this.sliderRange;
    const newLeft = left - this.incrementValue;
    const newRight = right - this.incrementValue;

    // 左边界校验：若左滑块低于最小值，调整右滑块到最小允许范围
    if (newLeft < 0) {
      const minAllowedLeft = 0;
      const minAllowedRight = minAllowedLeft + this.currentGap;
      this.sliderRange = [minAllowedLeft, minAllowedRight];
      return;
    }

    this.sliderRange = [newLeft, newRight];
    this.validateGap();
  }

  // 手动调整滑块后，校验并修正间距
  onSliderChange(event: MatSliderChange): void {
    this.sliderRange = event.value as [number, number];
    this.validateGap();
  }

  // 强制校验间距，确保在5%-10%之间
  private validateGap(): void {
    let [left, right] = this.sliderRange;
    const currentGap = right - left;

    // 间距过小：调整右滑块到最小间距值
    if (currentGap < this.minGapValue) {
      right = left + this.minGapValue;
      // 防止右滑块超出总范围
      if (right > this.totalRange) {
        left = this.totalRange - this.minGapValue;
        right = this.totalRange;
      }
    }
    // 间距过大：调整右滑块到最大间距值
    else if (currentGap > this.maxGapValue) {
      right = left + this.maxGapValue;
    }

    this.sliderRange = [left, right];
  }

  // 获取当前间距数值
  private get currentGap(): number {
    return this.sliderRange[1] - this.sliderRange[0];
  }
}

关键说明 #

• 滑块的value为数组[leftValue, rightValue]，通过双向绑定实现左右滑块的同步控制。
• 增量计算基于总范围的百分比，确保每次调整都是精确的5%增量。
• validateGap()函数会在任何滑块变更后触发，强制维持间距在要求范围内。
• 边界处理：当滑块触达总范围两端时，自动调整另一侧滑块，避免超出边界同时保持合规间距。

内容的提问来源于stack exchange，提问作者A G