Slider

Slider àGitHub à
Une entrée pour sélectionner une valeur numérique dans une plage.

Utilisation

Utilisez la directive v-model pour contrôler la valeur du curseur.

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

Utilisez la prop default-value pour définir la valeur initiale lorsque vous n'avez pas besoin de contrôler son état.

<template>
  <USlider :default-value="50" />
</template>
Utilisez aria-label ou aria-labelledby pour nommer un seul curseur de pouce, ils sont transférés au pouce qui est l'élément avec le rôle slider.Les pouces d'un curseur à plusieurs pouces sont nommés par leur position afin qu 'ils puissent être distingués, Minimum/Maximum pour deux pouces et Value n of m pour trois ou plus. Ces noms sont conservés, et un aria-label nomme le curseur dans son ensemble par un rôle group sur la racine au lieu d'être répété sur chaque pouce.

Min/Max

Utilisez les props min et max pour définir les valeurs minimales et maximales du curseur. Defaults sur 0 et 100.

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

Step étape

Utilisez la prop step pour définir la valeur d'incrément du Slider. Defaults à 1.

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

Multiple équivalent

Utilisez la directive v-model ou la prop default-value avec un tableau de valeurs pour créer un curseur de plage.

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

Utilisez le prop min-steps-between-thumbs pour limiter la distance minimale entre les pouces.

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

Définition

Utilisez la prop orientation pour changer l'orientation du curseur. Defaults à horizontal.

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

Couleur

Use the color prop to change the color of the slider.

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

Size

Utilisez le prop size pour modifier la taille du curseur.

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

Tooltip écrit

Utilisez la prop tooltip pour afficher un Tooltip autour des pouces du curseur avec la valeur actuelle. Vous pouvez le définir sur true pour le comportement par défaut ou passer un objet pour le personnaliser avec n'importe quelle propriété du composant Tooltip.

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

Désactivé

Utilisez le prop disabled pour désactiver le curseur.

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

Inverté

Utilisez le prop inverted pour inverser visuellement le curseur.

<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]

Thème

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 écrit

No recent changes

SelectMenu

An advanced searchable select element.

Switch

A control that toggles between two states.