Slider

SliderGitHub
用于选择某个范围内的数值的输入控件。

用法

使用 v-model 指令来控制滑块的值。

<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 props 来设置滑块的最小值和最大值。默认值为 0 和 100。

<template>
  <USlider :min="0" :max="50" :default-value="50" />
</template>

步长

使用 step prop 来设置滑块的增量值。默认值为 1。

<template>
  <USlider :step="10" :default-value="50" />
</template>

多值

使用 v-model 指令或 default-value prop 并传入一个值数组来创建范围滑块。

<script setup lang="ts">
const value = ref([
  25,
  75
])
</script>

<template>
  <USlider v-model="value" />
</template>

使用 min-steps-between-thumbs prop 来限制滑块点（thumb）之间的最小步长。

<script setup lang="ts">
const value = ref([
  25,
  50,
  75
])
</script>

<template>
  <USlider v-model="value" :min-steps-between-thumbs="10" />
</template>

方向

使用 orientation prop 来改变滑块的方向。默认为 horizontal。

<template>
  <USlider orientation="vertical" :default-value="50" class="h-48" />
</template>

颜色

使用 color prop 来改变滑块的颜色。

<template>
  <USlider color="neutral" :default-value="50" />
</template>

尺寸

使用 size prop 来改变滑块的尺寸。

<template>
  <USlider size="xl" :default-value="50" />
</template>

禁用

使用 disabled prop 来禁用滑块。

<template>
  <USlider disabled :default-value="50" />
</template>

反转

使用 inverted prop 来在视觉上反转滑块。

<template>
  <USlider inverted :default-value="25" />
</template>

API

属性

属性默认值类型
as

'div'

any

此组件应该渲染为的元素或组件。

size

'md'

"sm" | "md" | "xs" | "lg" | "xl"

color

'primary'

"error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral"

orientation

'horizontal'

"horizontal" | "vertical"

滑块的方向。

defaultValue

number | number[]

滑块初始渲染时的值。当您不需要控制滑块状态时使用。

disabled

boolean

当 true 时，阻止用户与滑块交互。

name

string

字段的名称。作为名称/值对的一部分与所属表单一起提交。

inverted

boolean

滑块在视觉上是否反转。

min

0

number

范围的最小值。

max

100

number

范围的最大值。

step

1

number

步进间隔。

minStepsBetweenThumbs

number

多个滑块点（thumb）之间允许的最小步长。

modelValue

number | number[]

ui

{ root?: ClassNameValue; track?: ClassNameValue; range?: ClassNameValue; thumb?: ClassNameValue; }

事件

事件类型
change

[payload: Event]

update:modelValue

[payload: number | number[]]

主题

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'
          }
        }
      }
    })
  ]
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'

export default defineConfig({
  plugins: [
    vue(),
    uiPro({
      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'
          }
        }
      }
    })
  ]
})

Slideover

一个从屏幕任意一侧滑入的对话框。

Stepper

用于指示多步骤流程进度的步骤集合。