ionic Range

Ionic Range（滑块）组件中文详细讲解

<ion-range> 是 Ionic 框架中非常常用的滑块组件，用于让用户通过拖动滑块来选择一个数值或一个数值范围，常用于音量、亮度、价格区间、评分等场景。

1. 基本单滑块用法

<ion-item>
  <ion-label>音量</ion-label>
  <ion-range min="0" max="100" value="60"></ion-range>
</ion-item>

2. 双滑块（选择范围，比如价格区间）

<ion-item>
  <ion-label>价格范围</ion-label>
  <ion-range 
    dualKnobs="true"
    min="0" 
    max="10000" 
    step="100"
    pin="true"
    [(ngModel)]="price">
  </ion-range>
</ion-item>

<!-- 显示当前选择的范围 -->
<ion-item>
  <ion-label>¥{{ price.lower }} - ¥{{ price.upper }}</ion-label>
</ion-item>

组件代码（Angular 示例）：

export class MyPage {
  price = {
    lower: 800,
    upper: 5000
  };
}

3. 常用属性一览（中英对照）

属性	类型	说明	示例
min	number	最小值	min=”0″
max	number	最大值	max=”100″
step	number	每次滑动增加/减少的步长	step=”5″
value	number 或 object	当前值（单滑块：数字；双滑块：{lower,upper}）	value=”50″
dualKnobs	boolean	是否开启双滑块（范围选择）	dualKnobs=”true”
pin	boolean	是否在滑块上方显示数值气泡	pin=”true”
snaps	boolean	是否让滑块“吸附”到刻度点	snaps=”true”
ticks	boolean	是否显示轨道上的刻度线	ticks=”true”
color	string	颜色（primary、secondary、danger 等）	color=”danger”
disabled	boolean	是否禁用	disabled=”true”
debounce	number	输入停止后延迟多少毫秒才触发 ionChange	debounce=”300″

4. 常用事件

<ion-range 
  (ionChange)="rangeChanged($event)"
  (ionKnobMoveStart)="startDrag()"
  (ionKnobMoveEnd)="endDrag()">
</ion-range>

rangeChanged(event: any) {
  console.log('当前值：', event.detail.value);
  // 单滑块：数字
  // 双滑块：{ lower: 100, upper: 800 }
}

startDrag() {
  console.log('开始拖动');
}

endDrag() {
  console.log('结束拖动，可在这里发请求保存');
}

5. 自定义气泡显示内容（pinFormatter）

想让气泡显示“¥500”而不是单纯的“500”：

<ion-range pin="true" [pinFormatter]="formatPrice"></ion-range>

formatPrice(value: number) {
  return `¥${value}`;
}

6. 带刻度 + 吸附的完整例子（常用于评分）

<ion-item>
  <ion-label>满意度评分</ion-label>
  <ion-range 
    min="1" 
    max="5" 
    step="1"
    snaps="true"
    ticks="true"
    pin="true"
    color="warning"
    [(ngModel)]="rating">
  </ion-range>
</ion-item>

7. React / Vue 用法简要示例

React：

<IonRange 
  min={0} 
  max={100} 
  value={volume}
  onIonChange={e => setVolume(e.detail.value as number)} />

Vue：

<ion-range :value="score" @ionChange="score = $event.target.value" />

官方文档（中文）

https://ionicframework.com/docs/api/range

小贴士

• Ionic 7+ 自动支持暗黑模式，Range 会自动变色
• 支持键盘操作（左右方向键）和屏幕阅读器，无障碍做得很好
• 双滑块时，建议配合 pin=”true” 使用，用户体验更好

需要我给你打包一个完整可运行的 Angular / React / Vue 项目模板吗？直接说框架就行～