用法
使用 v-model 指令来控制滑块（Slider）的值。
<script setup lang="ts">
const value = ref(50)
</script>
<template>
<USlider v-model="value" />
</template>
使用 default-value prop 在您不需要控制其状态时设置初始值。
<template>
<USlider :default-value="50" />
</template>
最小值 / 最大值
使用 min 和 max 属性来设置滑块的最小值和最大值。默认值分别为 0 和 100。
<template>
<USlider :min="0" :max="50" :default-value="50" />
</template>
步长 (Step)
使用 step 属性来设置滑块的增量值。默认值为 1。
<template>
<USlider :step="10" :default-value="50" />
</template>
多选
使用 v-model 指令或 default-value 属性并传入一个数组，即可创建一个范围滑块。
<script setup lang="ts">
const value = ref([
25,
75
])
</script>
<template>
<USlider v-model="value" />
</template>
使用 min-steps-between-thumbs 属性来限制滑块滑块（thumbs）之间的最小距离。
<script setup lang="ts">
const value = ref([
25,
50,
75
])
</script>
<template>
<USlider v-model="value" :min-steps-between-thumbs="10" />
</template>
Orientation
使用 orientation 属性来更改滑块的方向。默认值为 horizontal（水平）。
<template>
<USlider orientation="vertical" :default-value="50" class="h-48" />
</template>
颜色
使用 color 属性来更改滑块的颜色。
<template>
<USlider color="neutral" :default-value="50" />
</template>
尺寸
使用 size 属性来更改滑块的大小。
<template>
<USlider size="xl" :default-value="50" />
</template>
Tooltip
使用 tooltip 属性在滑块滑块周围显示包含当前值的 提示框 (Tooltip)。您可以将其设置为 true 以启用默认行为，或者传入一个对象以使用 Tooltip 组件的任何属性进行自定义。
<template>
<USlider :default-value="50" tooltip />
</template>
禁用
使用 disabled 属性来禁用滑块。
<template>
<USlider disabled :default-value="50" />
</template>
反转 (Inverted)
使用 inverted 属性在视觉上反转滑块。
<template>
<USlider inverted :default-value="25" />
</template>
API
属性
| 属性 | 默认值 | 类型 |
|---|---|---|
as | 'div' | any此组件应渲染为的元素或组件。 |
尺寸 | 'md' | "xs" | "sm" | "md" | "lg" | "xl" |
color | 'primary' | "primary" | "secondary" | "success" | "info" | "warning" | "error" | "neutral" |
orientation | 'horizontal' | "horizontal" | "vertical"滑块的方向。 |
tooltip | false | boolean | TooltipProps在滑块滑块周围显示包含当前值的提示框。
|
defaultValue | number | number[]初始渲染时滑块的值。当您不需要控制滑块状态时使用。 | |
name | string字段的名称。作为名称/值对的一部分随其所属表单提交。 | |
disabled | boolean当为 | |
inverted | boolean滑块在视觉上是否反转。 | |
最小值 | 0 | number范围的最小值。 |
max | 100 | number范围的最大值。 |
step | 1 | number步进间隔。 |
minStepsBetweenThumbs | number多个滑块滑块之间允许的最小步数。 | |
modelValue | T | |
ui | { root?: ClassNameValue; track?: ClassNameValue; range?: ClassNameValue; thumb?: ClassNameValue; } |
事件
| 事件 | 类型 |
|---|---|
change | [事件: Event] |
update:modelValue | [value: T | undefined] |
主题
app.config.ts
export default defineAppConfig({
ui: {
slider: {
slots: {
root: 'relative flex items-center select-none touch-none',
track: 'relative bg-accented overflow-hidden rounded-full grow',
range: 'absolute rounded-full',
thumb: 'rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2'
},
variants: {
color: {
primary: {
range: 'bg-primary',
thumb: 'ring-primary focus-visible:outline-primary/50'
},
secondary: {
range: 'bg-secondary',
thumb: 'ring-secondary focus-visible:outline-secondary/50'
},
success: {
range: 'bg-success',
thumb: 'ring-success focus-visible:outline-success/50'
},
info: {
range: 'bg-info',
thumb: 'ring-info focus-visible:outline-info/50'
},
warning: {
range: 'bg-warning',
thumb: 'ring-warning focus-visible:outline-warning/50'
},
error: {
range: 'bg-error',
thumb: 'ring-error focus-visible:outline-error/50'
},
neutral: {
range: 'bg-inverted',
thumb: 'ring-inverted focus-visible:outline-inverted/50'
}
},
size: {
xs: {
thumb: 'size-3'
},
sm: {
thumb: 'size-3.5'
},
md: {
thumb: 'size-4'
},
lg: {
thumb: 'size-4.5'
},
xl: {
thumb: 'size-5'
}
},
orientation: {
horizontal: {
root: 'w-full',
range: 'h-full'
},
vertical: {
root: 'flex-col h-full',
range: 'w-full'
}
},
disabled: {
true: {
root: 'opacity-75 cursor-not-allowed'
}
}
},
compoundVariants: [
{
orientation: 'horizontal',
size: 'xs',
class: {
track: 'h-[6px]'
}
},
{
orientation: 'horizontal',
size: 'sm',
class: {
track: 'h-[7px]'
}
},
{
orientation: 'horizontal',
size: 'md',
class: {
track: 'h-[8px]'
}
},
{
orientation: 'horizontal',
size: 'lg',
class: {
track: 'h-[9px]'
}
},
{
orientation: 'horizontal',
size: 'xl',
class: {
track: 'h-[10px]'
}
},
{
orientation: 'vertical',
size: 'xs',
class: {
track: 'w-[6px]'
}
},
{
orientation: 'vertical',
size: 'sm',
class: {
track: 'w-[7px]'
}
},
{
orientation: 'vertical',
size: 'md',
class: {
track: 'w-[8px]'
}
},
{
orientation: 'vertical',
size: 'lg',
class: {
track: 'w-[9px]'
}
},
{
orientation: 'vertical',
size: 'xl',
class: {
track: 'w-[10px]'
}
}
],
defaultVariants: {
size: 'md',
color: 'primary'
}
}
}
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
slider: {
slots: {
root: 'relative flex items-center select-none touch-none',
track: 'relative bg-accented overflow-hidden rounded-full grow',
range: 'absolute rounded-full',
thumb: 'rounded-full bg-default ring-2 focus-visible:outline-2 focus-visible:outline-offset-2'
},
variants: {
color: {
primary: {
range: 'bg-primary',
thumb: 'ring-primary focus-visible:outline-primary/50'
},
secondary: {
range: 'bg-secondary',
thumb: 'ring-secondary focus-visible:outline-secondary/50'
},
success: {
range: 'bg-success',
thumb: 'ring-success focus-visible:outline-success/50'
},
info: {
range: 'bg-info',
thumb: 'ring-info focus-visible:outline-info/50'
},
warning: {
range: 'bg-warning',
thumb: 'ring-warning focus-visible:outline-warning/50'
},
error: {
range: 'bg-error',
thumb: 'ring-error focus-visible:outline-error/50'
},
neutral: {
range: 'bg-inverted',
thumb: 'ring-inverted focus-visible:outline-inverted/50'
}
},
size: {
xs: {
thumb: 'size-3'
},
sm: {
thumb: 'size-3.5'
},
md: {
thumb: 'size-4'
},
lg: {
thumb: 'size-4.5'
},
xl: {
thumb: 'size-5'
}
},
orientation: {
horizontal: {
root: 'w-full',
range: 'h-full'
},
vertical: {
root: 'flex-col h-full',
range: 'w-full'
}
},
disabled: {
true: {
root: 'opacity-75 cursor-not-allowed'
}
}
},
compoundVariants: [
{
orientation: 'horizontal',
size: 'xs',
class: {
track: 'h-[6px]'
}
},
{
orientation: 'horizontal',
size: 'sm',
class: {
track: 'h-[7px]'
}
},
{
orientation: 'horizontal',
size: 'md',
class: {
track: 'h-[8px]'
}
},
{
orientation: 'horizontal',
size: 'lg',
class: {
track: 'h-[9px]'
}
},
{
orientation: 'horizontal',
size: 'xl',
class: {
track: 'h-[10px]'
}
},
{
orientation: 'vertical',
size: 'xs',
class: {
track: 'w-[6px]'
}
},
{
orientation: 'vertical',
size: 'sm',
class: {
track: 'w-[7px]'
}
},
{
orientation: 'vertical',
size: 'md',
class: {
track: 'w-[8px]'
}
},
{
orientation: 'vertical',
size: 'lg',
class: {
track: 'w-[9px]'
}
},
{
orientation: 'vertical',
size: 'xl',
class: {
track: 'w-[10px]'
}
}
],
defaultVariants: {
size: 'md',
color: 'primary'
}
}
}
})
]
})