Slider

滑块GitHub
用于选择范围内的数值的输入。

用法

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

<script setup lang="ts">
const value = ref(50)
</script>

<template>
  <USlider v-model="value" />
</template>
<script setup lang="ts">
import { ref } from 'vue'

const value = ref(50)
</script>

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

当不需要控制其状态时，使用default-value属性设置初始值。

<template>
  <USlider :default-value="50" />
</template>
使用aria-label或aria-labelledby命名单个thumb Slider，它们将被转发到具有slider角色的thumb元素。多个拇指滑块的拇指按其位置命名，因此可以区分它们，Minimum/Maximum用于两个拇指，Value n of m用于三个或更多拇指。这些名称将保留，aria-label通过根上的group角色命名整个滑块，而不是在每个拇指上重复。

最小/最大

使用min和max属性将Slider. slide的最小值和最大值设置为0和100。

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

Step

使用step属性将Slider.xml的增量值设置为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>
<script setup lang="ts">
import { ref } from 'vue'

const value = ref([
  25,
  75
])
</script>

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

使用min-steps-between-thumbs道具限制拇指之间的最小距离。

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

<template>
  <USlider v-model="value" :min-steps-between-thumbs="10" />
</template>
<script setup lang="ts">
import { ref } from 'vue'

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

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

定向

使用orientation道具将Slider.xml.的方向更改为horizontal。

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

Color

使用color道具更改滑块的颜色。

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

Size

使用size道具更改滑块的大小。

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

工具提示

使用tooltip prop以当前值在Slider拇指周围显示Tooltip。您可以将其设置为true以获得默认行为，或传递一个对象以使用Tooltip组件中的任何属性对其进行自定义。

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

禁用

使用disabled道具禁用滑块。

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

倒置

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

<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'
"xs" | "sm" | "md" | "lg" | "xl"
color
'primary'
"primary" | "secondary" | "success" | "info" | "warning" | "error" | "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.

name
string

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

disabled
boolean

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

inverted
boolean

Whether the slider is visually inverted.

min
0
number

The minimum value for the range.

max
100
number

The maximum value for the range.

step
1
number

The stepping interval.

minStepsBetweenThumbs
number

The minimum permitted steps between multiple thumbs.

modelValue
T
ui
{ root?: SlotClass; track?: SlotClass; range?: SlotClass; thumb?: SlotClass; }

Emits

Event Type
change
[event: Event]
update:modelValue
[value: T | undefined]

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-3 focus-visible:outline-offset-2'
      },
      variants: {
        color: {
          primary: {
            range: 'bg-primary',
            thumb: 'ring-primary outline-primary/25'
          },
          secondary: {
            range: 'bg-secondary',
            thumb: 'ring-secondary outline-secondary/25'
          },
          success: {
            range: 'bg-success',
            thumb: 'ring-success outline-success/25'
          },
          info: {
            range: 'bg-info',
            thumb: 'ring-info outline-info/25'
          },
          warning: {
            range: 'bg-warning',
            thumb: 'ring-warning outline-warning/25'
          },
          error: {
            range: 'bg-error',
            thumb: 'ring-error outline-error/25'
          },
          neutral: {
            range: 'bg-inverted',
            thumb: 'ring-inverted outline-inverted/25'
          }
        },
        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-3 focus-visible:outline-offset-2'
          },
          variants: {
            color: {
              primary: {
                range: 'bg-primary',
                thumb: 'ring-primary outline-primary/25'
              },
              secondary: {
                range: 'bg-secondary',
                thumb: 'ring-secondary outline-secondary/25'
              },
              success: {
                range: 'bg-success',
                thumb: 'ring-success outline-success/25'
              },
              info: {
                range: 'bg-info',
                thumb: 'ring-info outline-info/25'
              },
              warning: {
                range: 'bg-warning',
                thumb: 'ring-warning outline-warning/25'
              },
              error: {
                range: 'bg-error',
                thumb: 'ring-error outline-error/25'
              },
              neutral: {
                range: 'bg-inverted',
                thumb: 'ring-inverted outline-inverted/25'
              }
            },
            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'
          }
        }
      }
    })
  ]
})

Changelog

No recent changes

SelectMenu

An advanced searchable select element.

Switch

A control that toggles between two states.