Slider 滑块

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

基础用法

主力资金38%

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

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

拖动调整当前因子权重

分析创造性0.35

更稳定更灵活

24

48%

68

<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"
        />
        <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"
      />
      <span class="slider-demo__range-labels">
        <span>更稳定</span>
        <span>更灵活</span>
      </span>
    </label>
    <div class="slider-demo__states">
      <AuSlider v-model="compactValue" size="small" show-value />
      <AuSlider v-model="defaultValue" :format-value="formatPercent" show-value />
      <AuSlider :model-value="68" size="large" disabled show-value />
    </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-muted);
  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-muted);
}
.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-muted);
    border-inline-start: 0;
  }
}
</style>

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	格式化显示值	(value: number) => string	null

Events

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

Slots

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

Exposes

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