nouislider-vue3

noUiSliderVue

Componente de Vue 3 basado en noUiSlider.

Cuenta con la configuracion basica que brinda el complemento original, ademas de funcionalidades adicionales como tooltips clickeables, pips clickeables y merge de tooltips.

Instalacion

npm install nouislider-vue3

import Slider from 'nouislider-vue3';
import 'nouislider-vue3/css';

Uso basico

<template>
    <Slider
        v-model="value"
        :range="{ min: 0, max: 100 }"
    />
</template>

<script>
import Slider from 'nouislider-vue3';
import 'nouislider-vue3/css';

export default {
    components: { Slider },
    data() {
        return {
            value: 50,
        }
    }
}
</script>

Slider con rango (dos handles)

<Slider
    v-model="values"
    :range="{ min: 0, max: 100 }"
    :connect="true"
    :step="1"
    :tooltips="true"
/>

data() {
    return {
        values: [20, 80], // dos handles
    }
}

Slider con animacion

<Slider
    v-model="value"
    :range="{ min: 0, max: 100 }"
    :animate="true"
    :animation-duration="500"
    behaviour="tap"
/>

La duracion de la animacion se sincroniza automaticamente con la transicion CSS. Cuando animate es false, la animacion se desactiva completamente.

Tooltips solo al hacer click

<Slider
    v-model="value"
    :range="{ min: 0, max: 100 }"
    :tooltip-on-click="true"
/>

Los tooltips se crean automaticamente y solo se muestran mientras el handle esta siendo arrastrado.

Pips clickeables

<Slider
    v-model="value"
    :range="{ min: 0, max: 100 }"
    :pips="{ mode: 'steps', density: 3 }"
    :clickable-pips="true"
/>

Al hacer click en un pip, el handle mas cercano se mueve a ese valor.

Merge de tooltips

<Slider
    v-model="values"
    :range="{ min: 0, max: 100 }"
    :tooltips="true"
    :merge-tooltips="{ threshold: 15, separator: ' - ' }"
/>

Cuando los handles estan a menos de threshold porcentual de distancia, sus tooltips se fusionan en uno solo.

Props

Props de noUiSlider

Props adicionales del wrapper

Opciones de behaviour

Keywords que se combinan con guiones. Ejemplo: "tap-drag", "hover-snap", "unconstrained-tap".

Eventos

Orden de disparo: start > slide > drag > update > change > set > end

Nota: change NO se dispara con .set() programatico. Solo update y set se disparan en cambios programaticos.

Metodos expuestos (ref)

Accesibles via template ref:

<Slider ref="slider" ... />

this.$refs.slider.set(50);
this.$refs.slider.reset();

Opciones actualizables via updateOptions: margin, padding, limit, step, range, pips, tooltips, animate, snap.

Para cambiar orientation, direction, behaviour, format, connect o animationDuration, el componente destruye y recrea el slider automaticamente al cambiar el prop.

Notas importantes

1. get() retorna strings — Usar get(true) para obtener numeros.
2. Sliders verticales necesitan altura CSS explicita.
3. connect con 2+ handles — Usar array de booleans con longitud = handles + 1. 'lower'/'upper' solo funciona con 1 handle.
4. reset() solo resetea valores — No deshace cambios hechos via updateOptions.
5. v-model emite valores numericos — Aunque se use format, update:modelValue siempre emite los valores sin formatear para evitar conflictos.

Documentacion

Documentacion con ejemplos y detalles de configuracion: nouislider-vue.singlecode.net

Documentacion de noUiSlider (plugin base): refreshless.com/nouislider

Licencia

Distribuido bajo la licencia MIT. Vea LICENSE.md para mas informacion.