InputSlider

滑块与数字输入框联动的复合组件。拖动滑块或在输入框中输入数值均可改变值,blur 时才会提交到 v-model,适合需要精确输入的参数调节场景。支持 Auto 模式:当值等于 min 时输入框显示 Auto 文字。

基本用法

拖动 + 输入

当前值: 512

<script setup lang="ts">
import { InputSlider } from '@tripo3d/design';
import { ref } from 'vue';

const value = ref<[number]>([512]);
</script>

<template>
  <!-- class 会透传到内部 Slider,传 flex-1 让滑块填满剩余宽度 -->
  <InputSlider v-model="value" :min="0" :max="2048" :step="1" class="flex-1" />
</template>

Auto 模式

show-auto

值等于 min 时输入框显示 Auto,便于表达自动/默认语义。

当前值: 128

<InputSlider
  v-model="resolution"
  :min="128"
  :max="2048"
  :step="128"
  class="flex-1"
  show-auto
/>

API

Props

名称	类型	默认值	说明
modelValue	[number]	—	受控值(单元素数组)
min	number	0	最小值
max	number	100	最大值
step	number	—	步长
showAuto	boolean	—	值等于 min 时输入框显示 Auto
textAuto	string	'Auto'	Auto 模式下的替代文本
inputClass	string	—	数字输入框额外 class
class	string	—	传递给内部 Slider 的 class。通常用于 flex-1 占满剩余宽度
disabled	boolean	—	禁用(整个组件置灰)

Events

事件	Payload	说明
update:modelValue	(value: [number])	blur 或拖拽松手时提交新的值

实现要点

• 组件内部布局为 flex gap-2 items-center,依次渲染 <Slider>(可伸缩)+ <SnapInput>(固定宽度 w-18.5)
• SnapInput 默认是透明背景 + 10% 白边,在深色场景下直接可用;浅色页面请自定义 inputClass 覆写背景 / 边框
• update:modelValue 只在 SnapInput blur 时触发,滑块拖拽仍是实时反馈(内部 state),需要实时同步请监听 Slider 的 update:modelValue