Lzh on GitHub

Slider

SliderGitHub
用于选择范围内的数值的输入框。

用法

使用 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

使用 min 和 max props 设置 Slider 的最小值和最大值。默认为 0 和 100。

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

步长 (Step)

使用 step prop 设置 Slider 的增量值。默认为 1。

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

多值 (Multiple)

使用 v-model 指令或 default-value prop 和一个值数组来创建范围 Slider。

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

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

使用 min-steps-between-thumbs prop 限制滑块之间的最小距离。

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

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

方向 (Orientation)

使用 orientation prop 更改 Slider 的方向。默认为 horizontal。

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

颜色 (Color)

使用 color prop 更改 Slider 的颜色。

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

尺寸 (Size)

使用 size prop 更改 Slider 的尺寸。

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

工具提示 (Tooltip) New

使用 tooltip prop 在 Slider 滑块周围显示带有当前值的 Tooltip。你可以将其设置为 true 以使用默认行为，或者传递一个对象以使用 Tooltip 组件的任何属性来自定义它。

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

禁用 (Disabled)

使用 disabled prop 禁用 Slider。

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

反转 (Inverted)

使用 inverted prop 视觉上反转 Slider。

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

API

Props

Prop Default Type
as

'div'

any

The element or component this component should render as.

size

'md'

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

color

'primary'

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

orientation

'horizontal'

"horizontal" | "vertical"

The orientation of the slider.

tooltip

false

boolean | TooltipProps

Display a tooltip around the slider thumbs with the current value. { disableClosingTrigger: true }

defaultValue

number | number[]

The value of the slider when initially rendered. Use when you do not need to control the state of the slider.

disabled

boolean

When true, prevents the user from interacting with the slider.

step

1

number

The stepping interval.

max

100

number

The maximum value for the range.

name

string

The name of the field. Submitted with its owning form as part of a name/value pair.

min

0

number

The minimum value for the range.

inverted

boolean

Whether the slider is visually inverted.

minStepsBetweenThumbs

number

The minimum permitted steps between multiple thumbs.

modelValue

number | number[]

ui

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

Emits

Event Type
change

Event

update:modelValue

number | number[]

update:modelValue

number | number[]

Theme

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

一组用于指示多步骤流程进度的步骤。