Slider

Controle deslizante para seleção de um valor ou intervalo.

Uso

<script setup lang="ts">
import { Slider } from '@halfbyte/maka'
import { ref } from 'vue'

const volume = ref(50)
</script>

<template>
  <Slider v-model="volume" label="Volume" />
</template>

Exemplos

Básico

<Slider v-model="val" label="Padrão" />
<Slider v-model="val" label="Sem valor" :show-value="false" />
<Slider v-model="val" label="Passo de 10" :step="10" :show-ticks="true" />
<Slider v-model="val" label="Desabilitado" :disabled="true" />

Range

Passe um array [lo, hi] em v-model para ativar o modo de dois thumbs.

<Slider v-model="range" label="Intervalo" />
<Slider v-model="price" label="Preço" :min="0" :max="1000" :step="50"
  :format-value="v => `R$${v}`" />

Tamanhos

<Slider size="sm" v-model="val" label="Small" />
<Slider size="md" v-model="val" label="Medium" />
<Slider size="lg" v-model="val" label="Large" />

Cores

<Slider color="blue"  v-model="val" label="Blue" />
<Slider color="black" v-model="val" label="Black" />
<Slider color="lime"  v-model="val" label="Lime" />

Error

<Slider tone="error" v-model="val" label="Valor inválido" />

Com input numérico

<Slider v-model="val" label="Com input" :with-input="true" />
<Slider v-model="range" label="Range + input" :with-input="true" />

Ticks e labels de limites

<Slider
  v-model="temp"
  label="Temperatura"
  :min="1" :max="5" :step="1"
  :show-ticks="true"
  min-label="Frio"
  max-label="Quente"
  :format-value="v => ['','❄️','','🌤','','🔥'][v]"
/>

Props

Prop	Tipo	Padrão
modelValue	number | [number, number]	—
defaultValue	number | [number, number]	—
min	number	0
max	number	100
step	number	1
size	"sm" | "md" | "lg"	"md"
color	"blue" | "black" | "lime"	"blue"
tone	"default" | "error"	"default"
label	string	—
showValue	boolean	true
formatValue	(v: number) => string	—
minLabel	string	—
maxLabel	string	—
showTicks	boolean	false
withInput	boolean	false
disabled	boolean	false
name	string	—
aria-label	string	—
aria-labelledby	string	—

Events

Evento	Payload	Descrição
update:modelValue	number | [number, number]	Emitido ao mover o controle

Teclado

Tecla	Ação
→ / ↑	+step
← / ↓	−step
Page Up	+10×step
Page Down	−10×step
Home	Valor mínimo
End	Valor máximo
Tab	Próximo knob