Slider

Der SliderGitHub
Eine Eingabe zum Auswählen eines numerischen Werts innerhalb eines Bereichs.

Bearbeiten

Verwenden Sie die v-model-Direktive, um den Wert des Sliders zu steuern.

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

Verwenden Sie die default-value-prop, um den Anfangswert festzulegen, wenn Sie den Zustand nicht steuern müssen.

<template>
  <USlider :default-value="50" />
</template>
Verwenden Sie aria-label oder aria-labelledby, um einen einzelnen Daumen-Slider zu benennen, sie werden an den Daumen weitergeleitet, der das Element mit der Rolle slider ist.Die Daumen eines Sliders mit mehreren Daumen werden nach ihrer Position benannt, so dass sie auseinandergehalten werden können, Minimum/Maximum für zwei Daumen und Value n of m für drei oder mehr. Diese Namen werden beibehalten, und ein aria-label nennt den Slider als Ganzes durch eine group-Rolle an der Wurzel, anstatt auf jedem Daumen wiederholt zu werden.

Min/Max (englisch).

Verwenden Sie die Props min und max, um die minimalen und maximalen Werte des Sliders festzulegen.

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

Step (englisch)

Verwenden Sie die step prop, um den Inkrementwert des Slider. Defaults auf 1 zu setzen.

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

Mehrfach

Verwenden Sie die v-model-Direktive oder die default-value-Prop mit einem Array von Werten, um einen Bereichs-Slider zu erstellen.

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

Verwenden Sie die min-steps-between-thumbs-Stütze, um den Mindestabstand zwischen den Daumen zu begrenzen.

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

Orientierung

Verwenden Sie die orientation-prop, um die Ausrichtung des Sliders zu ändern. Standardmäßig auf horizontal.

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

Color Bearbeiten

Verwenden Sie die color-Prop, um die Farbe des Sliders zu ändern.

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

Größe

Verwenden Sie die size-Stütze, um die Größe des Sliders zu ändern.

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

Tooltip (englisch)

Verwenden Sie die tooltip prop, um eine Tooltip um die Schieber-Daumen mit dem aktuellen Wert anzuzeigen. Sie können es auf true für das Standardverhalten einstellen oder ein Objekt übergeben, um es mit einer beliebigen Eigenschaft aus der Komponente Tooltip anzupassen.

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

Disabled ist ein

Verwenden Sie die disabled-Prop, um den Slider zu deaktivieren.

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

Inverted (englisch)

Verwenden Sie die inverted-Prop, um den Slider visuell umzukehren.

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

API (englisch)

Props Bearbeiten

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 (englisch)

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

Theme Bearbeiten

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 (englisch)

No recent changes

SelectMenu

An advanced searchable select element.

Switch

A control that toggles between two states.