---
title: "Ext.slider.Multi"
description: "xtype 为 multislider 的 Ext JS 原生组件参考。"
---

> Documentation Index
> Fetch the complete documentation index at: https://ag.879818327.xyz/llms.txt
> Use this file to discover all available pages before exploring further.

# Ext.slider.Multi

源码定义：`ext-all-debug.js:140350`。分类：选择器与滑块。

## 创建示例

```javascript
var component = Ext.create("Ext.slider.Multi", {
  xtype: "multislider",
  animate: true,
  ariaRole: 'slider',
  childEls: [,
  clickToChange: true,
  renderTo: Ext.getBody()
});
```

## 属性

| 属性 | 类型 | 默认值 | 说明 | 配置示例 |
| --- | --- | --- | --- | --- |
| `animate` | `Boolean` | `true` | 控制值或位置变化时是否使用动画。 | `animate: true` |
| `ariaRole` | `String` | `'slider'` | 组件在辅助技术中的 ARIA 角色。 | `ariaRole: 'slider'` |
| `childEls` | `Array` | `[` | 组件创建后需要引用的子 DOM 元素集合。 | `childEls: [` |
| `clickToChange` | `Boolean` | `true` | 控制点击滑轨时是否改变当前值。 | `clickToChange: true` |
| `componentLayout` | `String` | `'sliderfield'` | 组件采用的内部布局策略。 | `componentLayout: 'sliderfield'` |
| `constrainThumbs` | `Boolean` | `true` | 控制多个滑块手柄是否限制在允许的相对位置内。 | `constrainThumbs: true` |
| `decimalPrecision` | `Number` | `0` | 值规范化时保留的小数位数。 | `decimalPrecision: 0` |
| `dragging` | `Boolean` | `false` | 标记组件当前是否处于拖动状态。 | `dragging: false` |
| `fieldSubTpl` | `Array` | `[` | 字段 HTML 的子模板片段。 | `fieldSubTpl: [` |
| `horizontalProp` | `String` | `'left'` | 水平模式下用于定位的 CSS 属性。 | `horizontalProp: 'left'` |
| `increment` | `Number` | `0` | 值调整时采用的步进间隔。 | `increment: 0` |
| `keyIncrement` | `Number` | `1` | 键盘方向键调整值时采用的步进间隔。 | `keyIncrement: 1` |
| `maxValue` | `Number` | `100` | 允许设置的最大值。 | `maxValue: 100` |
| `minValue` | `Number` | `0` | 允许设置的最小值。 | `minValue: 0` |
| `onDragEnd` | `Mixed` | `Ext.emptyFn` | 结束拖动手柄时执行的回调函数。 | `onDragEnd: Ext.emptyFn` |
| `onDragStart` | `Mixed` | `Ext.emptyFn` | 开始拖动手柄时执行的回调函数。 | `onDragStart: Ext.emptyFn` |
| `tipText` | `Object/null` | `null` | 滑块提示文字的生成配置。 | `tipText: null` |
| `transformTrackPoints` | `Mixed` | `Ext.identityFn` | 将滑轨坐标转换为组件坐标的函数。 | `transformTrackPoints: Ext.identityFn` |
| `useTips` | `Boolean` | `true` | 控制拖动时是否显示数值提示。 | `useTips: true` |
| `vertical` | `Boolean` | `false` | 控制组件是否以垂直方向显示。 | `vertical: false` |

## 方法

| 方法 | 参数 | 说明 | 调用示例 |
| --- | --- | --- | --- |
| `initValue` | `` | 初始化 `value`。 执行时会更新 `originalValue` 状态。源码涉及 `addThumb()`、`normalizeValue()`。 | `component.initValue()` |
| `initComponent` | `` | 初始化组件及其子项。 执行时会保留父类默认行为、更新 `thumbs`、`keyIncrement` 状态。源码涉及 `addEvents()`、`callParent()`。 | `component.initComponent()` |
| `addThumb` | `value` | 添加 `thumb`。源码涉及 `getComponentLayout()`。 | `component.addThumb(...)` |
| `promoteThumb` | `topThumb` | 提升 `thumb` 的优先级。 执行时会更新 `thumbStack` 状态。 | `component.promoteThumb(...)` |
| `getSubTplData` | `` | 读取并返回 `subTplData`。 执行时会保留父类默认行为。源码涉及 `callParent()`。 | `component.getSubTplData()` |
| `onRender` | `` | 生成 `on` 的渲染结果。 执行时会保留父类默认行为。源码涉及 `callParent()`。 | `component.onRender()` |
| `initEvents` | `` | 初始化 `events`。源码涉及 `mon()`。 | `component.initEvents()` |
| `getTrackpoint` | `xy` | 读取并返回 `trackpoint`。源码涉及 `transformTrackPoints()`。 | `component.getTrackpoint(...)` |
| `onMouseDown` | `e` | 处理 `mouseDown` 回调。源码涉及 `getTrackpoint()`、`onClickChange()`、`focus()`。 | `component.onMouseDown(...)` |
| `onClickChange` | `trackPoint` | 处理 `clickChange` 回调。 执行时会更新组件值。源码涉及 `getNearest()`、`setValue()`、`reversePixelValue()`。 | `component.onClickChange(...)` |
| `getNearest` | `trackPoint` | 读取并返回 `nearest`。源码涉及 `reversePixelValue()`、`getRange()`。 | `component.getNearest(...)` |
| `onKeyDown` | `e` | 处理 `keyDown` 回调。 执行时会更新组件值。源码涉及 `getValue()`、`setValue()`。 | `component.onKeyDown(...)` |
| `normalizeValue` | `v` | 规范化 `value`。 | `component.normalizeValue(...)` |
| `setMinValue` | `val` | 设置 `minValue`。 执行时会更新组件值、同步关联状态、更新 `minValue` 状态。源码涉及 `setValue()`、`syncThumbs()`。 | `component.setMinValue(...)` |
| `setMaxValue` | `val` | 设置 `maxValue`。 执行时会更新组件值、同步关联状态、更新 `maxValue` 状态。源码涉及 `setValue()`、`syncThumbs()`。 | `component.setMaxValue(...)` |
| `setValue` | `index, value, animate, changeComplete` | 设置 `value`。 执行时会派发 `beforechange`、`change`、`changecomplete` 事件。源码涉及 `normalizeValue()`、`fireEvent()`、`calculateThumbPosition()`、`checkDirty()`。 | `component.setValue(...)` |
| `calculateThumbPosition` | `v` | 计算 `thumbPosition`。源码涉及 `getRange()`。 | `component.calculateThumbPosition(...)` |
| `getRatio` | `` | 读取并返回 `ratio`。源码涉及 `getRange()`。 | `component.getRatio()` |
| `getRange` | `` | 读取并返回 `range`。 | `component.getRange()` |
| `reversePixelValue` | `pos` | 反向换算 `pixelValue`。源码涉及 `getRatio()`。 | `component.reversePixelValue(...)` |
| `reversePercentageValue` | `pos` | 反向换算 `percentageValue`。源码涉及 `getRange()`。 | `component.reversePercentageValue(...)` |
| `onDisable` | `` | 处理 `disable` 回调。 执行时会保留父类默认行为、更新 `thumbHolder` 状态。源码涉及 `callParent()`。 | `component.onDisable()` |
| `onEnable` | `` | 处理 `enable` 回调。 执行时会保留父类默认行为、同步关联状态。源码涉及 `callParent()`、`syncThumbs()`。 | `component.onEnable()` |
| `syncThumbs` | `` | 同步 `thumbs`。源码涉及 `calculateThumbPosition()`。 | `component.syncThumbs()` |
| `getValue` | `index` | 读取并返回 `value`。源码涉及 `getValues()`。 | `component.getValue(...)` |
| `getValues` | `` | 读取并返回 `values`。 | `component.getValues()` |
| `getSubmitValue` | `` | 读取并返回 `submitValue`。源码涉及 `getValue()`。 | `component.getSubmitValue()` |
| `reset` | `` | 将组件恢复为初始状态。 执行时会更新组件值。源码涉及 `setValue()`、`clearInvalid()`。 | `component.reset()` |
| `setReadOnly` | `readOnly` | 设置 `readOnly`。 执行时会保留父类默认行为。源码涉及 `callParent()`。 | `component.setReadOnly(...)` |
| `beforeDestroy` | `` | 在 `destroy` 前执行预处理。 执行时会保留父类默认行为。源码涉及 `callParent()`。 | `component.beforeDestroy()` |

## 事件

| 事件 | 说明 | 监听示例 |
| --- | --- | --- |
| `beforechange` | 组件值变化前触发；监听器返回 `false` 可取消变更。 源码在 `setValue()` 中通过 `fireEvent()` 触发。 | `listeners: { beforechange: function () {} }` |
| `change` | 组件值发生变化时触发。 源码在 `setValue()` 中通过 `fireEvent()` 触发。 | `listeners: { change: function () {} }` |
| `changecomplete` | 值调整完成后触发。 源码在 `setValue()` 中通过 `fireEvent()` 触发。 | `listeners: { changecomplete: function () {} }` |
| `drag` | 拖动过程中触发。 源码只在事件声明处列出该事件；实际触发由继承的基类或关联对象负责。 | `listeners: { drag: function () {} }` |
| `dragend` | 拖动结束时触发。 源码只在事件声明处列出该事件；实际触发由继承的基类或关联对象负责。 | `listeners: { dragend: function () {} }` |
| `dragstart` | 开始拖动时触发。 源码只在事件声明处列出该事件；实际触发由继承的基类或关联对象负责。 | `listeners: { dragstart: function () {} }` |

Source: https://ag.879818327.xyz/ext/picker/slider-multi/index.mdx