noUiSlider Vue

Appearance

Behaviour ​

Define cómo interactúa el usuario con el control deslizante. Esta opción acepta una lista de valores separados por guiones ("-") para habilitar diferentes comportamientos. Los valores posibles son:

Opciones ​

  • drag: Permite arrastrar el rango del control deslizante. Los controladores siempre son arrastrables.

  • drag-fixed: Permite arrastrar el rango sin cambiar su ancho. Arrastrar un controlador mueve el otro.

  • tap: Mueve el controlador más cercano al lugar donde se hace clic en el control deslizante.

  • hover: Dispara eventos al pasar el ratón o un lápiz sobre el control deslizante.

  • unconstrained-tap: Permite que los controladores se muevan uno sobre el otro.

  • none: Desactiva todos los comportamientos adicionales, dejando solo el movimiento estándar de los controladores.

Ejemplos ​

Drag ​

Permite arrastrar el rango (la barra verde que conecta los controladores). Requiere dos controladores. La opción connect debe estar configurada en true. El evento slide se dispara para ambos controladores al arrastrar el rango.

Valor:

Valor:

Click me to view the code
html
<template>
    <p>Valor: {{configs.values && configs.values[0]}}</p>
    <p>Valor: {{configs.values && configs.values[1]}}</p>
    <v-slider
        v-model="configs.values"
        :start="configs.start"
        :step="configs.step"
        :behaviour="configs.behaviour"
        :connect="configs.connect"
        :range="configs.range"
    ></v-slider>
</template>
<script setup>
    import { reactive } from 'vue';

    const configs = reactive({
        values: null,
        start: [20, 40],
        behaviour: 'drag',
        connect: true,
        range: {
            'min': 20,
            'max': 80
        }
    });
</script>

Drag-fixed ​

Mantiene la distancia entre los controladores fija cuando se activa la opción drag.

Valor:

Valor:

Click me to view the code
html
<template>
    <p>Valor: {{configs.values && configs.values[0]}}</p>
    <p>Valor: {{configs.values && configs.values[1]}}</p>
    <v-slider
        v-model="configs.values"
        :start="configs.start"
        :behaviour="configs.behaviour"
        :connect="configs.connect"
        :range="configs.range"
    ></v-slider>
</template>
<script setup>
    import { reactive } from 'vue';

    const configs = reactive({
        values: null,
        start: [40, 60],
        behaviour: 'drag-fixed',
        connect: true,
        range: {
            'min': 20,
            'max': 80
        }
    });
</script>

Arrastrar todos los controladores (drag-all) ​

Arrastra todos los controladores cuando se activa la opción drag. Requiere más de dos controladores. La opción connect debe estar configurada en true. El evento slide se dispara para todos los controladores al arrastrar el rango.

Valor:

Click me to view the code
html
<template>
    <p>Valor: {{configs.values && configs.values}}</p>
    <v-slider
        v-model="configs.values"
        :start="configs.start"
        :behaviour="configs.behaviour"
        :connect="configs.connect"
        :range="configs.range"
    ></v-slider>
</template>
<script setup>
    import { reactive } from 'vue';

    const configs = reactive({
        values: null,
        start: [40, 60, 80],
        behaviour: 'drag-all',
        connect: true,
        range: {
            'min': 20,
            'max': 100
        }
    });
</script>

Tap ​

Un controlador se ajusta a la ubicación donde se hace clic. Se utiliza una transición suave. Esta opción es la predeterminada.

Valor:

Click me to view the code
html
<template>
    <p>Valor: {{configs.values && configs.values}}</p>
    <v-slider
        v-model="configs.values"
        :start="configs.start"
        :behaviour="configs.behaviour"
        :connect="configs.connect"
        :range="configs.range"
    ></v-slider>
</template>
<script setup>
    import { reactive } from 'vue';

    const configs = reactive({
        values: null,
        start: 40,
        behaviour: 'tap',
        connect: [false, true],
        range: {
            'min': 20,
            'max': 80
        }
    });
</script>

Snap ​

Un controlador se ajusta a la ubicación donde se hace clic. Se puede mover inmediatamente, sin necesidad de soltar y volver a hacer clic (mouseup + mousedown).

Valor:

Click me to view the code
html
<template>
    <p>Valor: {{configs.values && configs.values}}</p>
    <v-slider
        v-model="configs.values"
        :start="configs.start"
        :behaviour="configs.behaviour"
        :connect="configs.connect"
        :range="configs.range"
    ></v-slider>
</template>
<script setup>
    import { reactive } from 'vue';

    const configs = reactive({
        values: null,
        start: 40,
        behaviour: 'snap',
        connect: [true, false],
        range: {
            'min': 20,
            'max': 80
        }
    });
</script>

Hover ​

Con esta opción activada, el control deslizante dispara eventos de hover cuando un usuario con ratón o lápiz pasa sobre el control deslizante. El evento proporciona el valor del control deslizante en la posición sobre la que se pasa. No se dispara mientras el control deslizante se arrastra con ratón o lápiz, pero sí para eventos táctiles.

Valor:

Valor de hover: 0

Click me to view the code
html
<template>
    <p>Valor: {{configs.values}}</p>
    <p>Valor de <b>hover</b>: {{configs.hoverValue}}</p>
    <v-slider
        v-model="configs.values"
        :start="configs.start"
        :behaviour="configs.behaviour"
        :range="configs.range"
        @hover="value => configs.hoverValue = value"
    ></v-slider>
</template>
<script setup>
    import { reactive } from 'vue';

    const configs = reactive({
        values: null,
        hoverValue: 0,
        start: 5,
        behaviour: 'hover-snap',
        range: {
            'min': 0,
            'max': 10
        },
    });
</script>

Sin restricciones (unconstrained-tap) ​

Con esta opción activada, los controladores pueden pasar uno sobre el otro. Las opciones limit y margin no pueden usarse con este comportamiento. Todas las API devolverán los valores del control deslizante en el orden original de los controladores, independientemente de si los controladores han cambiado de lugar.

Valor:

Click me to view the code
html
<template>
    <c-text>Valor: {{configs.values}}</c-text>
    <v-slider
        v-model="configs.values"
        :start="configs.start"
        :behaviour="configs.behaviour"
        :connect="configs.connect"
        :range="configs.range"
    ></v-slider>
</template>
<script setup>
    import { reactive } from 'vue';

    const configs = reactive({
        values: null,
        start: [20, 50, 80],
        behaviour: 'unconstrained-tap',
        connect: true,
        range: {
            'min': 0,
            'max': 100
        }
    });
</script>

Pasos suaves (smooth-steps) ​

Con esta opción activada, los controladores ignorarán los valores de paso mientras se arrastran. Los pasos se aplican cuando se suelta un controlador. El evento update se dispara cuando se suelta un controlador.

Valor:

Click me to view the code
html
<template>
    <c-text>Valor: {{configs.values}}</c-text>
    <v-slider
        v-model="configs.values"
        :start="configs.start"
        :behaviour="configs.behaviour"
        :step="configs.step"
        :connect="configs.connect"
        :range="configs.range"
    ></v-slider>
</template>
<script setup>
    import { reactive } from 'vue';

    const configs = reactive({
        values: null,
        start: [0, 100],
        behaviour: 'smooth-steps',
        step: 15,
        connect: true,
        range: {
            'min': 0,
            'max': 100
        }
    });
</script>

Invertir Conexiones ​

Con esta opción activada, las conexiones se invierten cuando los controladores pasan uno sobre el otro. Requiere el comportamiento unconstrained y la opción connect. Esta opción solo es aplicable para controles deslizantes con dos controladores.

Valor:

Click me to view the code
html
<template>
    <c-text>Valor: {{configs.values}}</c-text>
    <v-slider
        v-model="configs.values"
        :start="configs.start"
        :behaviour="configs.behaviour"
        :step="configs.step"
        :connect="configs.connect"
        :range="configs.range"
    ></v-slider>
</template>
<script setup>
    import { reactive } from 'vue';

    const configs = reactive({
        values: null,
        start: [20*60, 8*60],
        behaviour: 'unconstrained-invert-connects',
        step: 15,
        connect: true,
        range: {
            'min': 0,
            'max': 24*60
        }
    });
</script>

Opciones combinadas ​

La mayoría de las banderas de "behaviour" se pueden combinar. Este ejemplo combina "tap" (toque), "drag" (arrastrar) y "smooth-steps" (pasos suaves).

Valor:

Click me to view the code
html
<template>
    <c-text>Valor: {{configs.values}}</c-text>
    <v-slider
        v-model="configs.values"
        :start="configs.start"
        :behaviour="configs.behaviour"
        :step="configs.step"
        :connect="configs.connect"
        :range="configs.range"
    ></v-slider>
</template>
<script setup>
    import { reactive } from 'vue';

    const configs = reactive({
        values: null,
        start: [40, 60],
        behaviour: 'drag-smooth-steps-tap-hover',
        step: 10,
        connect: true,
        range: {
            'min': 20,
            'max': 80
        }
    });
</script>