使用场景
在连续或离散数值区间内选择单值或范围。min/max 定义区间，step 定义步进；range 模型为数字数组。
输入、步进与事件
input 随拖动发生，change 在操作提交后发生；showInput 提供数值输入，inputSize 可独立指定四档密度。
输入、步进与事件
<template>
<div class="example">
<AsamSlider
ref="control"
v-bind="{
...{ 'show-input': true, 'input-size': 'small' },
...{ min: 0, max: 100, step: 5 }
}"
v-model="value"
@input="event = 'input: ' + $event"
@change="event = 'change: ' + $event"
/>
<AsamButton type="default" @click="control?.focus()"> 聚焦滑块 </AsamButton>
<output>值：{{ value }}；{{ event }}</output>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamSliderBasicExample' });
import { ref } from 'vue';
import { AsamSlider, AsamButton } from '@asam-ui/ui';
import type { AsamSliderExpose } from '@asam-ui/ui';
const control = ref<AsamSliderExpose>();
const value = ref(30);
const event = ref('尚未更改');
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm, 8px);
}
.density-grid {
display: grid;
gap: var(--asam-space-md, 16px);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
section {
display: grid;
gap: var(--asam-space-sm, 8px);
min-width: 0;
}
output {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style><template>
<div class="example">
<AsamSlider
ref="control"
v-bind="{
...{ 'show-input': true, 'input-size': 'small' },
...{ min: 0, max: 100, step: 5 }
}"
v-model="value"
@input="event = 'input: ' + $event"
@change="event = 'change: ' + $event"
/>
<AsamButton type="default" @click="control?.focus()"> 聚焦滑块 </AsamButton>
<output>值：{{ value }}；{{ event }}</output>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamSliderBasicExample' });
import { ref } from 'vue';
import { AsamSlider, AsamButton } from '@asam-ui/ui';
const control = ref();
const value = ref(30);
const event = ref('尚未更改');
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm, 8px);
}
.density-grid {
display: grid;
gap: var(--asam-space-md, 16px);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
section {
display: grid;
gap: var(--asam-space-sm, 8px);
min-width: 0;
}
output {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style>区间、标记与提示
range 使用双端点数组；marks 定义标记，formatTooltip 格式化提示内容。disabled 保留展示并禁止调整。
区间、标记与提示
<template>
<div class="example">
<AsamSlider
v-model="range"
v-bind="{
range: true,
marks: { 0: '最低', 50: '建议', 100: '最高' },
'format-tooltip': format
}"
/>
<AsamSlider :model-value="30" disabled />
<output>区间：{{ range }}</output>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamSliderRangeExample' });
import { ref } from 'vue';
import { AsamSlider } from '@asam-ui/ui';
const range = ref<number[]>([20, 80]);
function format(value: number) {
return value + '%';
}
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm, 8px);
}
.density-grid {
display: grid;
gap: var(--asam-space-md, 16px);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
section {
display: grid;
gap: var(--asam-space-sm, 8px);
min-width: 0;
}
output {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style><template>
<div class="example">
<AsamSlider
v-model="range"
v-bind="{
range: true,
marks: { 0: '最低', 50: '建议', 100: '最高' },
'format-tooltip': format
}"
/>
<AsamSlider :model-value="30" disabled />
<output>区间：{{ range }}</output>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamSliderRangeExample' });
import { ref } from 'vue';
import { AsamSlider } from '@asam-ui/ui';
const range = ref([20, 80]);
function format(value) {
return value + '%';
}
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm, 8px);
}
.density-grid {
display: grid;
gap: var(--asam-space-md, 16px);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
section {
display: grid;
gap: var(--asam-space-sm, 8px);
min-width: 0;
}
output {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style>四档尺寸与上下文继承
四个实例分别显式使用 large、big、default、small。下面省略 size 的实例随 ConfigProvider 响应切换；显式 size 覆盖祖先。面板本身没有 size 契约的入口不附加虚构尺寸属性。
四档尺寸与上下文继承
<template>
<div class="example">
<div class="density-grid">
<section data-density="large">
<strong> large </strong>
<AsamSlider size="large" :model-value="30" show-input />
</section>
<section data-density="big">
<strong> big </strong>
<AsamSlider size="big" :model-value="30" show-input />
</section>
<section data-density="default">
<strong> default </strong>
<AsamSlider size="default" :model-value="30" show-input />
</section>
<section data-density="small">
<strong> small </strong>
<AsamSlider size="small" :model-value="30" show-input />
</section>
</div>
<AsamConfigProvider :size="density">
<section data-density="inherited">
<AsamSlider :model-value="30" show-input />
</section>
</AsamConfigProvider>
<div class="row">
<AsamButton type="default" @click="density = 'small'"> 继承 small </AsamButton>
<AsamButton type="default" @click="density = 'big'"> 继承 big </AsamButton>
</div>
<output>配置提供器：{{ density }}</output>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamSliderSizesExample' });
import { ref } from 'vue';
import { AsamSlider, AsamConfigProvider, AsamButton } from '@asam-ui/ui';
import type { AsamControlSize } from '@asam-ui/ui';
const density = ref<AsamControlSize>('big');
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm, 8px);
}
.density-grid {
display: grid;
gap: var(--asam-space-md, 16px);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
section {
display: grid;
gap: var(--asam-space-sm, 8px);
min-width: 0;
}
output {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style><template>
<div class="example">
<div class="density-grid">
<section data-density="large">
<strong> large </strong>
<AsamSlider size="large" :model-value="30" show-input />
</section>
<section data-density="big">
<strong> big </strong>
<AsamSlider size="big" :model-value="30" show-input />
</section>
<section data-density="default">
<strong> default </strong>
<AsamSlider size="default" :model-value="30" show-input />
</section>
<section data-density="small">
<strong> small </strong>
<AsamSlider size="small" :model-value="30" show-input />
</section>
</div>
<AsamConfigProvider :size="density">
<section data-density="inherited">
<AsamSlider :model-value="30" show-input />
</section>
</AsamConfigProvider>
<div class="row">
<AsamButton type="default" @click="density = 'small'"> 继承 small </AsamButton>
<AsamButton type="default" @click="density = 'big'"> 继承 big </AsamButton>
</div>
<output>配置提供器：{{ density }}</output>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamSliderSizesExample' });
import { ref } from 'vue';
import { AsamSlider, AsamConfigProvider, AsamButton } from '@asam-ui/ui';
const density = ref('big');
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
min-width: 0;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-sm, 8px);
}
.density-grid {
display: grid;
gap: var(--asam-space-md, 16px);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
section {
display: grid;
gap: var(--asam-space-sm, 8px);
min-width: 0;
}
output {
overflow-wrap: anywhere;
color: var(--asam-color-text-secondary);
}
</style>ASAM 扩展与迁移
ASAM 扩展为四档 size 与 inputSize；inputSize 省略时使用滑块解析后的尺寸。vertical 需要显式 height 并保留足够操作空间。没有内容插槽；公开实例为 focus 和 onSliderClick。
离散、标记限制与垂直模式
数字 step 与 showStops 提供等距刻度；step="mark" 将操作限制到 marks 中的数值。 完整说明。
离散、标记限制与垂直模式
<template>
<div class="example">
<AsamSlider
v-model="discrete"
:step="20"
show-stops
:show-tooltip="false"
aria-label="离散刻度"
/>
<AsamSlider
v-model="marked"
step="mark"
:marks="marks"
placement="bottom"
:format-tooltip="format"
aria-label="只选标记"
/>
<AsamSlider
v-model="vertical"
vertical
height="180px"
:min="0"
:max="100"
:step="10"
aria-label="垂直滑块"
/>
<output>离散：{{ discrete }}；标记：{{ marked }}；垂直：{{ vertical }}</output>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { AsamSlider } from '@asam-ui/ui';
const discrete = ref(20);
const marked = ref(25);
const vertical = ref(40);
const marks = { 0: '0', 25: '25', 60: '60', 100: '100' };
const format = (value: number) => `当前 ${value}%`;
defineOptions({ name: 'AsamSliderModesDemo' });
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
}
</style><template>
<div class="example">
<AsamSlider
v-model="discrete"
:step="20"
show-stops
:show-tooltip="false"
aria-label="离散刻度"
/>
<AsamSlider
v-model="marked"
step="mark"
:marks="marks"
placement="bottom"
:format-tooltip="format"
aria-label="只选标记"
/>
<AsamSlider
v-model="vertical"
vertical
height="180px"
:min="0"
:max="100"
:step="10"
aria-label="垂直滑块"
/>
<output>离散：{{ discrete }}；标记：{{ marked }}；垂直：{{ vertical }}</output>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { AsamSlider } from '@asam-ui/ui';
const discrete = ref(20);
const marked = ref(25);
const vertical = ref(40);
const marks = { 0: '0', 25: '25', 60: '60', 100: '100' };
const format = (value) => `当前 ${value}%`;
defineOptions({ name: 'AsamSliderModesDemo' });
</script>
<style scoped>
.example {
display: grid;
gap: var(--asam-space-md, 16px);
}
</style>API 阅读方式
滑块的无障碍名称使用 ariaLabel（模板中写 aria-label）；旧 label 已移除。范围模式分别使用 rangeStartLabel 和 rangeEndLabel 描述两端。
下方 Props、Events、Slots、Exposes 按当前实际公开类型与运行默认值生成。组合属性按分支生效，不能任意混搭值模式。标为“未知 / 未声明”的默认值不代表 false 或空值。源码区域提供对应语言的独立 Demo.vue，可直接复制或下载；本地辅助组件、数据和素材已内联到当前文件。
API
属性 AsamSliderProps
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
ariaLabel | 原生 aria-label属性 | string | undefined | — |
id | — | string | undefined | undefined |
placement | Tooltip 组件出现的位置 | enum"auto" | "auto-start" | "auto-end" | "top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end"完整类型：(AsamSliderProps)["placement"] | "top" |
persistent | 当 slider 的 tooltip 处于非活动状态且 persistent 为 false 时，tooltip 将被销毁。当 show-tooltip 为 false 时，persistent 将始终为 false。 | (AsamSliderProps)["persistent"] | true |
disabled | 是否禁用 | (AsamSliderProps)["disabled"] | undefined |
height | 滑块高度，垂直模式必填 | string | undefined | — |
vertical | 垂直模式 | boolean | undefined | false |
max | 最大值 | number | undefined | 100 |
modelValue | 选中项绑定值 | (AsamSliderProps)["modelValue"] | 0 |
range | 是否开启选择范围 | boolean | undefined | false |
min | 最小值 | number | undefined | 0 |
showInput | 是否显示输入框，仅在 range 为 false 且 step 不为 'mark' 时生效。 | boolean | undefined | false |
validateEvent | 是否触发表单验证 | (AsamSliderProps)["validateEvent"] | true |
step | 步长，可以是数字或 'mark' 2.13.6，用于将值限制为刻度。 当设置为 'mark' 时，必须设置 marks 属性。 | enum"mark"完整类型：(AsamSliderProps)["step"] | 1 |
showInputControls | 在显示输入框的情况下，是否显示输入框的控制按钮 | (AsamSliderProps)["showInputControls"] | true |
showStops | 是否显示间断点 | boolean | undefined | false |
showTooltip | 是否显示提示信息 | (AsamSliderProps)["showTooltip"] | true |
formatTooltip | 格式化提示信息 | ((val: number) => number | string) | undefined | undefined |
rangeStartLabel | 当 range 为true时，屏幕阅读器标签开始的标记 | string | undefined | undefined |
rangeEndLabel | 当 range 为true时，屏幕阅读器标签结尾的标记 | string | undefined | undefined |
formatValueText | 显示屏幕阅读器的 aria-valuenow 属性的格式 | ((val: number) => string) | undefined | undefined |
tooltipClass | tooltip 的自定义类名 | AsamSliderProps["tooltipClass"] | undefined |
marks | 标记， key 的类型必须为 number 且取值在闭区间 [min, max] 内，每个标记可以单独设置样式 | (AsamSliderProps)["marks"] | — |
size | slider 包装器的大小，垂直模式下该属性不可用 | enum"large" | "big" | "default" | "small"完整类型：AsamControlSize | undefined | undefined |
inputSize | 可选输入框的密度；默认使用滑块解析后的尺寸。 | enum"large" | "big" | "default" | "small"完整类型：AsamControlSize | undefined | undefined |
事件 AsamSliderEmits
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
update:modelValue | — | (AsamSliderEmits)["update:modelValue"] | — |
input | — | (AsamSliderEmits)["input"] | — |
change | — | (AsamSliderEmits)["change"] | — |
插槽 AsamSliderSlots
实例方法与状态 AsamSliderExpose
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
onSliderClick | — | (event: MouseEvent | TouchEvent) => void | — |
focus | — | () => void | — |
用法与契约补充说明
离散、标记限制与垂直模式
数字 step 与 showStops 提供等距刻度；step="mark" 将操作限制到 marks 中的数值。
标记值必须落在 min/max 闭区间中。vertical 使用显式 height，键盘上下键调整值。
showTooltip、placement、formatTooltip、tooltipClass 与 persistent 控制提示浮层；
range 保持两个有序端点，输入框只用于单值模式。
关联组件
参数与事件补充说明
完整透传 2.13.7 的基础参数，并在适用时使用 ASAM 尺寸密度。
参数与事件说明
ariaLabel
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
id
必填：否；声明来源：上游声明。
默认值与来源
undefined（已安装运行时；已安装组件）固定上游源码默认表达式：undefined（2.14.7；源码事实，未作为 ASAM 运行实测）
placement
必填：否；声明来源：上游声明。
placement 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："auto" / "auto-start" / "auto-end" / "top" / "bottom" / "right" / "left" / "top-start" / "top-end" / "bottom-start" / "bottom-end" / "right-start" / "right-end" / "left-start" / "left-end"
默认值与来源
"top"（已安装运行时；已安装组件）固定上游文档默认：top（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：'top'（2.14.7；源码事实，未作为 ASAM 运行实测）
persistent
必填：否；声明来源：上游声明。
persistent 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
true（已安装运行时；已安装组件）固定上游文档默认：true（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：true（2.14.7；源码事实，未作为 ASAM 运行实测）
disabled
必填：否；声明来源：上游声明。
disabled 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
undefined（已安装运行时；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：undefined（2.14.7；源码事实，未作为 ASAM 运行实测）
height
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
vertical
必填：否；声明来源：上游声明。
vertical 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
max
必填：否；声明来源：上游声明。
默认值与来源
100（已安装运行时；已安装组件）固定上游文档默认：100（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：100（2.14.7；源码事实，未作为 ASAM 运行实测）
modelValue
必填：否；声明来源：上游声明。
默认值与来源
0（已安装运行时；已安装组件）固定上游文档默认：0（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：0（2.14.7；源码事实，未作为 ASAM 运行实测）
range
必填：否；声明来源：上游声明。
range 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
min
必填：否；声明来源：上游声明。
默认值与来源
0（已安装运行时；已安装组件）固定上游文档默认：0（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：0（2.14.7；源码事实，未作为 ASAM 运行实测）
showInput
必填：否；声明来源：上游声明。
showInput 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
validateEvent
必填：否；声明来源：上游声明。
validateEvent 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
true（已安装运行时；已安装组件）固定上游文档默认：true（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：true（2.14.7；源码事实，未作为 ASAM 运行实测）
step
必填：否；声明来源：上游声明。
step 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："mark"
默认值与来源
1（已安装运行时；已安装组件）固定上游文档默认：1（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：1（2.14.7；源码事实，未作为 ASAM 运行实测）
showInputControls
必填：否；声明来源：上游声明。
showInputControls 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
true（已安装运行时；已安装组件）固定上游文档默认：true（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：true（2.14.7；源码事实，未作为 ASAM 运行实测）
showStops
必填：否；声明来源：上游声明。
showStops 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
showTooltip
必填：否；声明来源：上游声明。
showTooltip 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
true（已安装运行时；已安装组件）固定上游文档默认：true（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：true（2.14.7；源码事实，未作为 ASAM 运行实测）
formatTooltip
必填：否；声明来源：上游声明。
formatTooltip 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(val: number): string | number
默认值与来源
undefined（已安装运行时；已安装组件）固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：undefined（2.14.7；源码事实，未作为 ASAM 运行实测）
rangeStartLabel
必填：否；声明来源：上游声明。
默认值与来源
undefined（已安装运行时；已安装组件）固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：undefined（2.14.7；源码事实，未作为 ASAM 运行实测）
rangeEndLabel
必填：否；声明来源：上游声明。
默认值与来源
undefined（已安装运行时；已安装组件）固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：undefined（2.14.7；源码事实，未作为 ASAM 运行实测）
formatValueText
必填：否；声明来源：上游声明。
formatValueText 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(val: number): string
默认值与来源
undefined（已安装运行时；已安装组件）固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：undefined（2.14.7；源码事实，未作为 ASAM 运行实测）
tooltipClass
必填：否；声明来源：上游声明。
tooltipClass 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false
默认值与来源
undefined（已安装运行时；已安装组件）固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：undefined（2.14.7；源码事实，未作为 ASAM 运行实测）
marks
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
size
必填：否；声明来源：ASAM 声明。
size 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："large" / "big" / "default" / "small"
默认值与来源
undefined（源码表达式；ASAM 声明）inputSize
必填：否；声明来源：ASAM 声明。
inputSize 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："large" / "big" / "default" / "small"
默认值与来源
undefined（源码表达式；ASAM 声明）AsamSliderProps 公开类型视图
import type { AsamSliderProps, AsamControlSize } from '@asam-ui/ui';
// AsamSliderProps
type PublicContract = {
readonly "ariaLabel"?: string | undefined;
readonly "id"?: string | undefined;
readonly "placement"?: (AsamSliderProps)["placement"];
readonly "persistent"?: (AsamSliderProps)["persistent"];
readonly "disabled"?: (AsamSliderProps)["disabled"];
readonly "height"?: string | undefined;
readonly "vertical"?: boolean | undefined;
readonly "max"?: number | undefined;
readonly "modelValue"?: (AsamSliderProps)["modelValue"];
readonly "range"?: boolean | undefined;
readonly "min"?: number | undefined;
readonly "showInput"?: boolean | undefined;
readonly "validateEvent"?: (AsamSliderProps)["validateEvent"];
readonly "step"?: (AsamSliderProps)["step"];
readonly "showInputControls"?: (AsamSliderProps)["showInputControls"];
readonly "showStops"?: boolean | undefined;
readonly "showTooltip"?: (AsamSliderProps)["showTooltip"];
readonly "formatTooltip"?: ((val: number) => number | string) | undefined;
readonly "rangeStartLabel"?: string | undefined;
readonly "rangeEndLabel"?: string | undefined;
readonly "formatValueText"?: ((val: number) => string) | undefined;
readonly "tooltipClass"?: AsamSliderProps["tooltipClass"];
readonly "marks"?: (AsamSliderProps)["marks"];
"size"?: AsamControlSize | undefined;
readonly "inputSize"?: AsamControlSize | undefined;
};参数与事件说明
update:modelValue
必填：是；声明来源：上游声明。
input
必填：是；声明来源：上游声明。
change
必填：是；声明来源：上游声明。
AsamSliderEmits 公开类型视图
import type { AsamSliderEmits } from '@asam-ui/ui';
// AsamSliderEmits
type PublicContract = {
"update:modelValue": (AsamSliderEmits)["update:modelValue"];
"input": (AsamSliderEmits)["input"];
"change": (AsamSliderEmits)["change"];
};AsamSliderSlots 公开类型视图
import type { AsamSliderSlots } from '@asam-ui/ui';
// AsamSliderSlots
type PublicContract = {
[key: string]: never;
};参数与事件说明
onSliderClick
必填：是；声明来源：上游声明。
onSliderClick 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(event: MouseEvent | TouchEvent): void
focus
必填：是；声明来源：ASAM 声明。
focus 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): void
AsamSliderExpose 公开类型视图
import type { AsamSliderExpose } from '@asam-ui/ui';
// AsamSliderExpose
type PublicContract = {
"onSliderClick": (event: MouseEvent | TouchEvent) => void;
"focus": () => void;
};