Behaviour

La propiedad behaviour controla como el slider responde a las interacciones del usuario. Se configuran como keywords separados por guiones.

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

Sintaxis

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

Keywords disponibles

tap

El handle mas cercano salta a la posicion clickeada en la barra del slider.

behaviour="tap"

Este es el valor por defecto.

drag

Permite arrastrar la barra de connect entre dos handles. Requiere 2 handles y connect: true.

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

drag-fixed

Como drag, pero mantiene la distancia entre handles constante al arrastrar el connect.

behaviour="drag-fixed"

drag-all

Arrastra todos los handles cuando se mueve el connect.

behaviour="drag-all"

fixed

Mantiene una distancia fija entre handles. Al mover uno, el otro se mueve proporcionalmente.

behaviour="fixed"

snap

El handle salta a la posicion clickeada y se puede arrastrar inmediatamente sin soltar el mouse.

behaviour="snap"

hover

Dispara el evento hover al pasar el mouse sobre el slider, reportando el valor en esa posicion.

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

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

unconstrained

Permite que los handles se crucen entre si. Las propiedades margin y limit no estan disponibles en este modo.

behaviour="unconstrained"

smooth-steps

Ignora los steps durante el arrastre y los aplica al soltar.

behaviour="smooth-steps"

invert-connects

Los connects se invierten cuando los handles se cruzan. Requiere unconstrained, connect, y solo funciona con 2 handles.

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

none

Deshabilita todo excepto el movimiento basico de handles.

behaviour="none"

Combinaciones

Los keywords se combinan con guiones:

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

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

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

<!-- Tap + drag con distancia fija -->
behaviour="tap-drag-fixed"