Slider

SchuifregelaarGitHub
Een invoer om een numerieke waarde binnen een bereik te selecteren.

Gebruik

Gebruik de v-model-richtlijn om de waarde van de schuifregelaar te bepalen.

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

Gebruik de default-value prop om de beginwaarde in te stellen wanneer u de status niet hoeft te regelen.

<template>
  <USlider :default-value="50" />
</template>
Gebruik aria-label of aria-labelledby om een enkele duimschuif te noemen, ze worden doorgestuurd naar de duim, het element met de slider-rol.De duimen van een schuifknop met meerdere duimen worden genoemd op basis van hun positie, zodat ze uit elkaar kunnen worden gehouden, Minimum / Maximum voor twee duimen en Value n of m voor drie of meer. Die namen worden bewaard, en een aria-label benoemt de Slider als geheel door een group rol op de root in plaats van herhaald te worden op elke duim.

Min / Max

Gebruik de min- en max-rekwisieten om de minimum- en maximumwaarden van de schuifregelaar in te stellen. Standaard ingesteld op 0 en 100.

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

Stap

Gebruik de step prop om de incrementwaarde van de schuifregelaar in te stellen. Standaard ingesteld op 1.

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

Meerdere

Gebruik de v-model-richtlijn of de default-value-prop met een array van waarden om een range Slider te maken.

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

Gebruik de min-steps-between-thumbs prop om de minimale afstand tussen de duimen te beperken.

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

Oriëntatie

Gebruik de orientation-prop om de oriëntatie van de schuifregelaar te wijzigen. Standaard horizontal.

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

Kleur

Gebruik de color prop om de kleur van de Slider te wijzigen.

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

Grootte

Gebruik de size prop om de grootte van de schuifregelaar te wijzigen.

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

Tooltip

Gebruik de tooltip prop om een Tooltip rond de schuifduimen weer te geven met de huidige waarde. U kunt het instellen op true voor standaardgedrag of een object doorgeven om het aan te passen met een eigenschap van de Tooltip component.

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

Uitgeschakeld

Gebruik de disabled prop om de Slider uit te schakelen.

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

Omgekeerd

Gebruik de inverted prop om de Slider visueel om te keren.

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

Uitzendt

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

Thema

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.