Slider

El sliderGitHub también
Una entrada para seleccionar un valor numérico dentro de un rango.

xph0000xUso

Utilice la directiva v-model para controlar el valor del deslizador.

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

Utilice el prop default-value para establecer el valor inicial cuando no necesite controlar su estado.

<template>
  <USlider :default-value="50" />
</template>
Utilice aria-label o aria-labelledby para nombrar un solo deslizador de pulgar, que se reenvían al pulgar que es el elemento con el rol slider.Los pulgares de un deslizador de múltiples pulgares se nombran por su posición para que puedan ser separados, Minimum/Maximum para dos pulgares y Value n of m para tres o más. Esos nombres se mantienen, y un aria-label nombra al deslizador en su conjunto a través de un rol group en la raíz en lugar de repetirse en cada pulgar.

Min/Max (Edición española)

Utilice los props min y max para establecer los valores mínimos y máximos del deslizador. Predeterminados a 0 y 100.

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

Step (Edición española)

Utilice el prop step para establecer el valor de incremento del Slider. Defaults a 1.

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

Multiplicación.

Utilice la directiva v-model o el prop default-value con una matriz de valores para crear un deslizador de rango.

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

Utilice el soporte min-steps-between-thumbs para limitar la distancia mínima entre los pulgares.

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

Orientación

Utilice el prop orientation para cambiar la orientación del deslizador. Predeterminados a horizontal.

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

Color (Edición española)

Utilice el accesorio color para cambiar el color del deslizador.

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

Tamaño

Utilice el prop size para cambiar el tamaño del deslizador.

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

Tooltip (Edición española)

Utilice el prop tooltip para mostrar un Tooltip alrededor de los pulgares del deslizador con el valor actual. Puede configurarlo en true para el comportamiento predeterminado o pasar un objeto para personalizarlo con cualquier propiedad del componente Tooltip.

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

Disabled

Utilice el prop disabled para desactivar el deslizador.

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

Invertido

Utilice el soporte inverted para invertir visualmente el deslizador.

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

API (Edición española)

Props (accesorios)

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

Emisiones

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

Temas

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 (Edición española)

No recent changes

SelectMenu

An advanced searchable select element.

Switch

A control that toggles between two states.