Slider 滑块

AuSlider 用于在连续或分级数值范围内选择单个值，适合权重、强度、音量和模型参数等设置。

基础用法

权重与参数调节

复用同一个滑块处理整数百分比和小数步进；标题、当前值与两端说明由业务布局自由组合。

主力资金38%

拖动调整当前因子权重位置风险12%

拖动调整当前因子权重情绪周期16%

拖动调整当前因子权重

分析创造性0.35

更稳定更灵活

24

48%

68

vue

<template>
  <div class="slider-demo">
    <div class="slider-demo__factor-grid">
      <label v-for="factor in factors" :key="factor.label" class="slider-demo__factor">
        <span class="slider-demo__heading">
          <span>{{ factor.label }}</span>
          <strong>{{ factor.value }}%</strong>
        </span>
        <AuSlider
          v-model="factor.value"
          :min="0"
          :max="100"
          :step="1"
          :aria-label="`${factor.label}权重`"
        />
        <small>拖动调整当前因子权重</small>
      </label>
    </div>
    <label class="slider-demo__temperature">
      <span class="slider-demo__heading">
        <span>分析创造性</span>
        <strong>{{ temperature.toFixed(2) }}</strong>
      </span>
      <AuSlider
        v-model="temperature"
        :min="0"
        :max="1"
        :step="0.05"
        aria-label="分析创造性"
      />
      <span class="slider-demo__range-labels">
        <span>更稳定</span>
        <span>更灵活</span>
      </span>
    </label>
    <div class="slider-demo__states" aria-label="滑块尺寸和状态示例">
      <AuSlider v-model="compactValue" size="small" show-value aria-label="小号滑块" />
      <AuSlider v-model="defaultValue" :format-value="formatPercent" show-value aria-label="默认滑块" />
      <AuSlider :model-value="68" size="large" disabled show-value aria-label="禁用滑块" />
    </div>
  </div>
</template>
<script setup>
import { reactive, ref } from 'vue';
import { AuSlider } from 'aurora-plus';
const factors = reactive([
  { label: '主力资金', value: 38 },
  { label: '位置风险', value: 12 },
  { label: '情绪周期', value: 16 },
]);
const temperature = ref(0.35);
const compactValue = ref(24);
const defaultValue = ref(48);
const formatPercent = (value) => `${value}%`;
</script>
<style scoped>
.slider-demo {
  display: grid;
  width: 100%;
  gap: 24px;
}
.slider-demo__factor-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  border: 1px solid var(--au-color-border-lighter);
  border-radius: var(--au-radius-control);
}
.slider-demo__factor {
  display: grid;
  min-width: 0;
  gap: 5px;
  padding: 14px;
}
.slider-demo__factor + .slider-demo__factor {
  border-inline-start: 1px solid var(--au-color-border-lighter);
}
.slider-demo__heading,
.slider-demo__range-labels {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.slider-demo__heading {
  color: var(--au-color-text-secondary);
  font-size: var(--au-font-size-small);
  font-weight: var(--au-font-weight-medium);
}
.slider-demo__heading strong {
  color: var(--au-color-primary);
  font-variant-numeric: tabular-nums;
  font-weight: var(--au-font-weight-semibold);
}
.slider-demo__factor small,
.slider-demo__range-labels {
  color: var(--au-color-text-secondary);
  font-size: var(--au-font-size-small);
}
.slider-demo__temperature {
  display: grid;
  gap: 3px;
}
.slider-demo__states {
  display: grid;
  width: min(100%, 420px);
  gap: 10px;
}
@media (max-width: 720px) {
  .slider-demo__factor-grid {
    grid-template-columns: 1fr;
  }
  .slider-demo__factor + .slider-demo__factor {
    border-block-start: 1px solid var(--au-color-border-lighter);
    border-inline-start: 0;
  }
}
</style>

使用建议

• 使用 v-model 接收数值；拖动和键盘调整都会回传 number。
• 为没有可见 <label> 的滑块设置准确的 aria-label，例如“主力资金权重”，不要只写“滑块”。
• 当前值、单位和两端说明属于业务语义，优先放在滑块外部；紧凑行内布局可使用 showValue。
• formatValue 同时格式化 showValue 的内容和无障碍值文本，适合百分比、温度或带单位数值。
• 单次选择两个端点属于区间选择场景，不应把两个 AuSlider 叠放在同一轨道上。

Slider API

Attributes

属性	说明	类型	默认值
modelValue	当前值；交互后统一回传数字	number / string	0
min	最小值	number / string	0
max	最大值	number / string	100
step	步进，必须大于 0	number / string	1
size	尺寸，可选 small / default / large	string	default
disabled	是否禁用	boolean	false
showValue	是否在轨道右侧显示格式化后的当前值	boolean	false
formatValue	格式化显示值与 aria-valuetext	(value: number) => string	null

当前值会限制在 min 与 max 之间，并以 min 为基准吸附到最近的 step。当 min 大于 max 时组件按数值大小重新确定范围；无效或非正数 step 回退为 1。

class 与 style 作用于组件外壳，其余未声明属性和原生监听器传递给内部 input[type="range"]，包括 id、name、aria-* 和键盘监听器。

Events

事件名	说明	参数
update:modelValue	数值变化	(value: number)
input	拖动或键盘调整过程中的连续变化	(value: number, event)
change	指针操作结束或原生键盘调整提交	(value: number, event)
focus	内部滑块获得焦点	(event)
blur	内部滑块失去焦点	(event)

Slots

插槽名	说明	插槽参数
value	自定义行内值；使用后即使未设置 showValue 也会显示	{ value, formattedValue, percentage }

Exposes

方法或属性	说明
focus(options?)	聚焦内部滑块
blur()	移除焦点
inputRef	内部原生 input[type="range"] 元素引用

组件支持点击轨道、指针拖动、触控拖动以及原生方向键、Home、End、Page Up 和 Page Down 操作。拖动使用 Pointer Capture，指针离开轨道后仍可连续调整；焦点轮廓、高对比度和 RTL 方向均会自动适配。