Metodos expuestos

Todos los metodos son accesibles via template ref:

<template>
    <Slider ref="slider" v-model="value" :range="{ min: 0, max: 100 }" />
    <button @click="$refs.slider.reset()">Reset</button>
</template>

Obtener valores

get(unencoded?)

Retorna el valor actual del slider.

// Valor formateado (string)
this.$refs.slider.get();
// → "50.00" (con format) o "50" (sin format)

// Valor numerico crudo
this.$refs.slider.get(true);
// → 50

// Multiples handles
this.$refs.slider.get(true);
// → [20, 80]

TIP

Siempre usa get(true) para obtener valores numericos. get() sin parametro retorna strings.

Establecer valores

set(value, fireSetEvent?, exactInput?)

Establece el valor del slider.

// Un handle
this.$refs.slider.set(75);

// Multiples handles
this.$refs.slider.set([25, 75]);

// Solo cambiar un handle (null = no cambiar)
this.$refs.slider.set([null, 75]); // Solo cambia el segundo

// Sin disparar evento 'set'
this.$refs.slider.set(75, false);

setHandle(index, value, fireSetEvent?, exactInput?)

Establece el valor de un handle especifico por indice.

// Mover el primer handle a 30
this.$refs.slider.setHandle(0, 30);

// Mover el segundo handle a 70
this.$refs.slider.setHandle(1, 70);

reset(fireSetEvent?)

Vuelve a los valores iniciales definidos en start.

this.$refs.slider.reset();

// Sin disparar evento
this.$refs.slider.reset(false);

WARNING

reset() solo resetea los valores. No deshace cambios hechos via updateOptions.

Estado

setDisable(handleNumber?)

Deshabilita el slider completo o un handle especifico.

// Deshabilitar todo
this.$refs.slider.setDisable();

// Deshabilitar solo el primer handle
this.$refs.slider.setDisable(0);

setEnable(handleNumber?)

Habilita el slider completo o un handle especifico.

this.$refs.slider.setEnable();
this.$refs.slider.setEnable(0);

Informacion

getSteps()

Retorna el step anterior/siguiente disponible por handle.

this.$refs.slider.getSteps();
// → [[prev, next], [prev, next]]

getPositions()

Retorna las posiciones porcentuales de los handles.

this.$refs.slider.getPositions();
// → [20, 80] (porcentajes)

getTooltips()

Retorna los elementos HTML de los tooltips.

this.$refs.slider.getTooltips();
// → [HTMLElement, HTMLElement]

getOrigins()

Retorna los elementos contenedores de los handles.

this.$refs.slider.getOrigins();
// → [HTMLElement, HTMLElement]

getOptions()

Retorna las opciones actuales del slider.

this.$refs.slider.getOptions();
// → { start: [...], range: {...}, step: 1, ... }

Opciones

updateOptions(options, fireSetEvent?)

Actualiza opciones del slider en tiempo de ejecucion.

this.$refs.slider.updateOptions({
    range: { min: 0, max: 200 },
    step: 5,
});

Opciones actualizables

Solo estas opciones se pueden cambiar via updateOptions:

margin, padding, limit, step, range, pips, tooltips, animate, snap

Para cambiar otras opciones (orientation, direction, behaviour, format, connect), el componente las maneja automaticamente al cambiar los props correspondientes.

Pips

setPips(config)

Crea o actualiza los pips.

this.$refs.slider.setPips({
    mode: 'steps',
    density: 3,
});

removePips()

Remueve los pips del slider.

this.$refs.slider.removePips();

Tooltips

removeTooltips()

Remueve todos los tooltips.

this.$refs.slider.removeTooltips();

Eventos

on(event, callback)

Registra un evento personalizado de noUiSlider.

this.$refs.slider.on('slide', (values, handle) => {
    console.log(values, handle);
});

off(event)

Remueve un evento registrado.

this.$refs.slider.off('slide');

Destruccion

destroy()

Destruye el slider y limpia todos los recursos (eventos, tooltips, pips, estilos dinamicos).

this.$refs.slider.destroy();

INFO

Normalmente no necesitas llamar destroy() manualmente. El componente lo llama automaticamente en beforeUnmount.