Slider

SliderGitLab
Um input para selecionar um valor numérico dentro de um intervalo.

Uso

Use a diretiva v-model para controlar o valor do Slider.

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

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

<script setup lang="ts">
import { ref } from 'vue'

const value = ref(50)
</script>

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

Use a prop default-value para definir o valor inicial quando você não precisa controlar o estado.

<template>
  <NSlider :default-value="50" />
</template>

Mín / Máx

Use as props min e max para definir os valores mínimo e máximo do Slider. O padrão é 0 e 100.

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

Etapa

Use a prop step para definir o valor de incremento do Slider. O padrão é 1.

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

Múltiplo

Use a diretiva v-model ou a prop default-value com um array de valores para criar um Slider de intervalo.

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

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

<script setup lang="ts">
import { ref } from 'vue'

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

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

Use a prop min-steps-between-thumbs para limitar a distância mínima entre os thumbs.

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

<template>
  <NSlider 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>
  <NSlider v-model="value" :min-steps-between-thumbs="10" />
</template>

Orientação

Use a prop orientation para alterar a orientação do Slider. O padrão é horizontal.

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

Cor

Use a prop color para alterar a cor do Slider.

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

Tamanho

Use a prop size para alterar o tamanho do Slider.

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

Tooltip

Use a prop tooltip para exibir um Tooltip ao redor dos thumbs do Slider com o valor atual. Você pode defini-la como true para o comportamento padrão ou passar um objeto para personalizá-la com qualquer propriedade do componente Tooltip.

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

Desabilitado

Use a prop disabled para desabilitar o Slider.

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

Invertido

Use a prop inverted para inverter visualmente o Slider.

<template>
  <NSlider 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" | "accent" | "success" | "info" | "warning" | "error" | "neutral"
orientation'horizontal' "horizontal" | "vertical"

The orientation of the slider.

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

disabledboolean

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

invertedboolean

Whether the slider is visually inverted.

min0 number

The minimum value for the range.

max100 number

The maximum value for the range.

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

Tema

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'
          },
          accent: {
            range: 'bg-accent',
            thumb: 'ring-accent outline-accent/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 '@nitro/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'
              },
              accent: {
                range: 'bg-accent',
                thumb: 'ring-accent outline-accent/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

Um elemento de seleção avançado com busca.

Switch

Um controle que alterna entre dois estados.