Behaviour

The behaviour property controls how the slider responds to user interactions. Keywords are configured separated by hyphens.

Behaviour: tap v-model: [30,70]

Syntax

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

Available keywords

tap

The closest handle jumps to the clicked position on the slider bar.

behaviour="tap"

This is the default value.

drag

Allows dragging the connect bar between two handles. Requires 2 handles and connect: true.

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

drag-fixed

Like drag, but keeps the distance between handles constant when dragging the connect.

behaviour="drag-fixed"

drag-all

Drags all handles when the connect is moved.

behaviour="drag-all"

fixed

Maintains a fixed distance between handles. Moving one causes the other to move proportionally.

behaviour="fixed"

snap

The handle jumps to the clicked position and can be dragged immediately without releasing the mouse.

behaviour="snap"

hover

Fires the hover event when the mouse passes over the slider, reporting the value at that position.

<Slider
    v-model="value"
    :range="{ min: 0, max: 100 }"
    behaviour="hover"
    @hover="onHover"
/>

methods: {
    onHover(value) {
        console.log('Hover at:', value);
    }
}

unconstrained

Allows handles to cross each other. The margin and limit properties are not available in this mode.

behaviour="unconstrained"

smooth-steps

Ignores steps during drag and applies them on release.

behaviour="smooth-steps"

invert-connects

Connects are inverted when handles cross each other. Requires unconstrained, connect, and only works with 2 handles.

<Slider
    v-model="values"
    :range="{ min: 0, max: 100 }"
    :connect="true"
    behaviour="unconstrained-invert-connects"
/>

none

Disables everything except basic handle movement.

behaviour="none"

Combinations

Keywords are combined with hyphens:

<!-- Tap + drag connect -->
behaviour="tap-drag"

<!-- Hover + snap -->
behaviour="hover-snap"

<!-- Unconstrained + tap -->
behaviour="unconstrained-tap"

<!-- Tap + drag with fixed distance -->
behaviour="tap-drag-fixed"