A styled HTML range input. Set min, max and step; bind the value with v-model.
Ejemplos
Basic
A 0–100 slider showing its live value.
Value: 0
<div class="max-w-sm">
<UiSlider v-model="state.vol" :min="0" :max="100" />
<p class="mt-2 text-sm text-gray-500">Value: {{ state.vol ?? 0 }}</p>
</div>Fractional step
A step of 0.01 over a 0–1 range gives fine, fractional control. Drag to watch the value update.
Opacity0.00
<div class="max-w-sm">
<div class="mb-1 flex items-center justify-between text-sm text-gray-600 dark:text-gray-400">
<span>Opacity</span>
<span class="font-mono">{{ (state.opacity ?? 0).toFixed(2) }}</span>
</div>
<UiSlider v-model="state.opacity" :min="0" :max="1" :step="0.01" />
<div class="mt-4 h-12 rounded-lg bg-primary-500" :style="{ opacity: state.opacity ?? 0 }" />
</div>Disabled
A disabled slider holds its value and ignores interaction.
Locked40
<div class="max-w-sm">
<div class="mb-1 flex items-center justify-between text-sm text-gray-400 dark:text-gray-500">
<span>Locked</span>
<span class="font-mono">40</span>
</div>
<UiSlider :model-value="40" :min="0" :max="100" disabled />
</div>Props
| Nombre | Tipo | Por defecto | Descripción |
|---|---|---|---|
| modelValue | number | 0 | Current value (v-model). |
| min | number | string | 0 | Minimum value. |
| max | number | string | 100 | Maximum value. |
| step | number | string | 1 | Step increment. |
| disabled | boolean | false | Disables the slider. |
| width | string | 'full' | Layout width. fullflex |
Eventos
| Evento | Datos | Descripción |
|---|---|---|
update:modelValue | number | Emitted with the new numeric value. |
input | Event | Emitted with the native input event. |