Forms

Slider

Cursore per la selezione di valori numerici con supporto range (due handle), orientamento verticale, step personalizzato e navigazione da tastiera completa.

Import

import { Slider } from '@pzeta/vue-components'

Esempio Base

Props

Prop	Tipo	Default	Descrizione
`modelValue`	`number \| number[] \| null`	`0`	Valore del slider (v-model). Numero singolo in modalità normale, array `[min, max]` in modalità range.
`min`	`number`	`0`	Valore minimo del range.
`max`	`number`	`100`	Valore massimo del range.
`step`	`number`	`1`	Incremento/decremento per ogni passo.
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Orientamento del cursore.
`range`	`boolean`	`false`	Abilita la modalità range con due handle; `modelValue` deve essere un array `[start, end]`.
`disabled`	`boolean`	`false`	Disabilita il componente.
`loading`	`boolean`	`false`	Mostra il loading spinner e blocca l'interazione.
`loadingIcon`	`string`	Da config	Icona personalizzata per il loading.
`size`	`'small' \| 'medium' \| 'large'`	`'medium'`	Dimensione della track e dell'handle.
`severity`	`'primary' \| 'secondary' \| 'success' \| 'info' \| 'warn' \| 'danger' \| 'help' \| 'contrast'`	`'primary'`	Colore della porzione riempita (range).
`label`	`string`	`null`	Etichetta del campo.
`helperText`	`string`	`null`	Testo di aiuto visualizzato sotto il componente.
`error`	`string`	`null`	Messaggio di errore; attiva lo stato di errore visivo.
`required`	`boolean`	`false`	Marca il campo come obbligatorio.
`tabindex`	`number`	`0`	Indice tab per l'handle (navigazione da tastiera).
`ariaLabel`	`string`	`undefined`	Label accessibile per screen reader.
`ariaLabelledby`	`string`	`undefined`	Riferimento a elemento label esterno.

Emits

Evento	Payload	Descrizione
`update:modelValue`	`number \| number[]`	Emesso durante il drag (aggiornamento continuo del valore).
`change`	`number \| number[]`	Emesso durante il drag; mirror di `update:modelValue`.
`slideend`	`{ originalEvent: Event; value: number \| number[] }`	Emesso al rilascio del mouse/touch con il valore finale.

Slot

Slot	Scope	Descrizione
`thumb`	`{ value: number; index?: number }`	Handle/thumb personalizzato. `value` è il valore corrente del handle, `index` è 0 (start) o 1 (end) in modalità range.

Esempi

Modalità Range

Orientamento Verticale

Step Personalizzato

Min/Max Personalizzati

Con Evento slideend

<template>
  <Slider v-model="value" @slideend="onSlideEnd" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { SliderSlideEndEvent } from '@pzeta/vue-components'

const value = ref(50)

const onSlideEnd = (event: SliderSlideEndEvent) => {
  console.log('Valore finale:', event.value)
  // Esegui chiamate API solo al rilascio, non durante il drag
}
</script>

Handle Personalizzato tramite Slot

Accessibilità

Ogni handle è un <div role="slider"> con aria-valuemin, aria-valuemax, aria-valuenow, aria-orientation.
In modalità range, il handle start ha aria-label "inizio intervallo" e l'end "fine intervallo".
Navigazione da tastiera sull'handle:
- ArrowLeft/ArrowDown: decrementa di step
- ArrowRight/ArrowUp: incrementa di step
- PageDown/PageUp: decrementa/incrementa di step × 10
- Home: porta al valore minimo
- End: porta al valore massimo
tabindex controlla la raggiungibilità degli handle.

TypeScript

import type { SliderProps, SliderEmits, SliderSlots, SliderSlideEndEvent } from '@pzeta/vue-components'

SignatureInput

Canvas interattivo per l'acquisizione di firme digitali tramite mouse o touch. Il valore emesso e un data URL base64 in formato PNG.

Textarea

Campo di testo multiriga con supporto per auto-resize, contatore caratteri e controllo del ridimensionamento manuale.