K
KoreUI

Range

Form

Slider con modos single y dual-handle, min/max/step personalizables, visualización de valor y binding con wire:model.

Uso básico

<x-kore::range wire:model="volume" label="Volumen" />
<x-kore::range wire:model="volume" label="Volumen" />

Modo rango

Dos handles para seleccionar un rango de valores. El wire:model se sincroniza como array [min, max].

<x-kore::range wire:model="priceRange" label="Precio" range :min="0" :max="200" />
<x-kore::range wire:model="priceRange" label="Precio" range :min="0" :max="200" />

Mostrar valor

Muestra el valor actual y las etiquetas min/max.

0 100 
<x-kore::range label="Brillo" show-value show-labels :min="0" :max="100" />
<x-kore::range label="Brillo" show-value show-labels :min="0" :max="100" />

Tamaños

El grosor del track y el tamaño del thumb escalan con el tamaño.

<x-kore::range label="Small" size="sm" />
<x-kore::range label="Medium" size="md" />
<x-kore::range label="Large" size="lg" />
<x-kore::range label="Small" size="sm" />
<x-kore::range label="Medium" size="md" />
<x-kore::range label="Large" size="lg" />

Estados

Disabled, required y error.

<x-kore::range label="Disabled" disabled />
<x-kore::range label="Required" required />
<x-kore::range label="Con error" error="Selecciona un valor" />
<x-kore::range label="Disabled" disabled />
<x-kore::range label="Required" required />
<x-kore::range label="Con error" error="Selecciona un valor" />

Props

Prop Tipo Default Descripción
label string|null null Texto de la etiqueta
hint string|null null Texto de ayuda debajo del campo
name string|null null Nombre para detección de errores
error string|null null Mensaje de error manual
size string md Tamaño: sm, md, lg
min number 0 Valor mínimo
max number 100 Valor máximo
step number 1 Incremento por paso
range bool false Habilitar modo dual-handle
showValue bool false Mostrar valor actual sobre el slider
showLabels bool false Mostrar etiquetas min/max debajo del slider
disabled bool false Estado deshabilitado
required bool false Campo obligatorio con asterisco
showError bool true Auto-detectar errores del \$errors bag