Exposed methods

All methods are accessible via template ref:

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

Getting values

get(unencoded?)

Returns the current slider value.

// Formatted value (string)
this.$refs.slider.get();
// → "50.00" (with format) or "50" (without format)

// Raw numeric value
this.$refs.slider.get(true);
// → 50

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

TIP

Always use get(true) to get numeric values. get() without parameter returns strings.

Setting values

set(value, fireSetEvent?, exactInput?)

Sets the slider value.

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

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

// Only change one handle (null = don't change)
this.$refs.slider.set([null, 75]); // Only changes the second

// Without firing the 'set' event
this.$refs.slider.set(75, false);

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

Sets the value of a specific handle by index.

// Move the first handle to 30
this.$refs.slider.setHandle(0, 30);

// Move the second handle to 70
this.$refs.slider.setHandle(1, 70);

reset(fireSetEvent?)

Returns to the initial values defined in start.

this.$refs.slider.reset();

// Without firing event
this.$refs.slider.reset(false);

WARNING

reset() only resets values. It does not undo changes made via updateOptions.

State

setDisable(handleNumber?)

Disables the entire slider or a specific handle.

// Disable all
this.$refs.slider.setDisable();

// Disable only the first handle
this.$refs.slider.setDisable(0);

setEnable(handleNumber?)

Enables the entire slider or a specific handle.

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

Information

getSteps()

Returns the previous/next available step per handle.

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

getPositions()

Returns the percentage positions of handles.

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

getTooltips()

Returns the tooltip HTML elements.

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

getOrigins()

Returns the handle container elements.

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

getOptions()

Returns the current slider options.

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

Options

updateOptions(options, fireSetEvent?)

Updates slider options at runtime.

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

Updatable options

Only these options can be changed via updateOptions:

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

To change other options (orientation, direction, behaviour, format, connect), the component handles them automatically when you change the corresponding props.

Pips

setPips(config)

Creates or updates pips.

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

removePips()

Removes pips from the slider.

this.$refs.slider.removePips();

Tooltips

removeTooltips()

Removes all tooltips.

this.$refs.slider.removeTooltips();

Events

on(event, callback)

Registers a custom noUiSlider event.

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

off(event)

Removes a registered event.

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

Destruction

destroy()

Destroys the slider and cleans up all resources (events, tooltips, pips, dynamic styles).

this.$refs.slider.destroy();

INFO

You normally don't need to call destroy() manually. The component calls it automatically on beforeUnmount.