Props

modelValue

Tipo: Number | Array | String | null
Requerido: Si

Valor:

Ver código de ejemplo

html

<template>
    <p>Valor: {{configs.value}}</p>
    <v-slider
        v-model="configs.value"
        :range="configs.range"
    ></v-slider>
</template>
<script setup>
    import { reactive } from 'vue';

    const configs = reactive({
        value: null,
        range: {
            min: 1,
            max: 10,
        },
    });
</script>

range

Todos los valores en el slider forman parte de un rango. El rango tiene un valor mínimo y un valor máximo. Si el valor mínimo es igual al valor máximo, los controles se distribuyen de manera uniforme a lo largo del deslizante.

Tipo: Object
Requerido: Si

Valor:

Ver código de ejemplo

html

<template>
    <p>Valor: {{configs.value}}</p>
    <v-slider
        v-model="configs.value"
        :range="configs.range"
    ></v-slider>
</template>
<script setup>
    import { reactive } from 'vue';

    const configs = reactive({
        value: null,
        range: {
            min: 23,
            max: 85,
        },
    });
</script>

start

Tipo: Array | Number

Valor:

Ver código de ejemplo

html

<template>
    <p>Valor: {{configs.value}}</p>
    <v-slider
        v-model="configs.value"
        :start="configs.start"
        :range="configs.range"
    ></v-slider>
</template>
<script setup>
    import { reactive } from 'vue';

    const configs = reactive({
        value: null,
        start: 5,
        range: {
            min: 1,
            max: 10,
        },
    });
</script>

connect

Tipo: Array | Boolean | String
Default: false

Valor:

Ver código de ejemplo

html

<template>
    <p>Valor: {{configs.value}}</p>
    <v-slider
        v-model="configs.value"
        :start="configs.start"
        :connect="configs.connect"
        :range="configs.range"
    ></v-slider>
</template>
<script setup>
    import { reactive } from 'vue';

    const configs = reactive({
        value: null,
        start: 6,
        connect: 'lower',
        range: {
            min: 1,
            max: 10,
        },
    });
</script>

step

Tipo: Number

Valor:

Ver código de ejemplo

html

<template>
    <p>Valor: {{configs.value}}</p>
    <v-slider
        v-model="configs.value"
        :step="configs.step"
        :range="configs.range"
    ></v-slider>
</template>
<script setup>
    import { reactive } from 'vue';

    const configs = reactive({
        value: null,
        step: 1,
        range: {
            min: 1,
            max: 10,
        },
    });
</script>

margin

Tipo: Number

Valores:

Ver código de ejemplo

html

<template>
    <p>Valores: {{configs.values}}</p>
    <v-slider
        v-model="configs.values"
        :start="configs.start"
        :margin="configs.margin"
        :range="configs.range"
    ></v-slider>
</template>
<script setup>
    import { reactive } from 'vue';

    const configs = reactive({
        values: null,
        start: [20, 80],
        margin: 30,
        range: {
            'min': 0,
            'max': 100
        }
    });
</script>

padding

Tipo: Array | Number
Default: 0

Valores:

Ver código de ejemplo

html

<template>
    <p>Valores: {{configs.values}}</p>
    <v-slider
        v-model="configs.values"
        :start="configs.start"
        :padding="configs.padding"
        :range="configs.range"
    ></v-slider>
</template>
<script setup>
    import { reactive } from 'vue';

    const configs = reactive({
        values: null,
        start: [20, 80],
        padding: [10, 15],
        range: {
            'min': 0,
            'max': 100
        },
    });
</script>

limit

Tipo: Number

Valores:

Ver código de ejemplo

html

<template>
    <p>Valores: {{configs.values}}</p>
    <v-slider
        v-model="configs.values"
        :start="configs.start"
        :limit="configs.limit"
        :behaviour="configs.behaviour"
        :connect="configs.connect"
        :range="configs.range"
    ></v-slider>
</template>
<script setup>
    import { reactive } from 'vue';

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

direction

Tipo: String
Valores aceptados: "ltr" | "rtl"
Default: "ltr"

Valor:

Ver código de ejemplo

html

<template>
    <p>Valor: {{configs.values}}</p>
    <v-slider
        v-model="configs.values"
        :start="configs.start"
        :direction="configs.direction"
        :range="configs.range"
    ></v-slider>
</template>
<script setup>
    import { reactive } from 'vue';

    const configs = reactive({
        values: null,
        start: 20,
        direction: 'rtl',
        range: {
            'min': 0,
            'max': 100
        },
    });
</script>

orientation

Tipo: String
Valores aceptados: "vertical" | "horizontal"
Default: "horizontal"

Aclaración

¡Establezca dimensiones! El slider no asume una altura predeterminada, por lo que es necesario establecer una altura. Se puede utilizar cualquier unidad, incluidas px, em o rem.

Valor:

Ver código de ejemplo

html

<template>
    <p>Valor: {{configs.value}}</p>
    <v-slider
        style="height: 150px;"
        v-model="configs.value"
        :start="configs.start"
        :orientation="configs.orientation"
        :range="configs.range"
    ></v-slider>
</template>
<script setup>
    import { reactive } from 'vue';

    const configs = reactive({
        value: null,
        start: 40,
        orientation: 'vertical',
        range: {
            'min': 0,
            'max': 100
        },
    });
</script>

animate

Tipo: Boolean
Valores aceptados: true | false
Default: false

animate: "false"

Valor:

animate: "true"

Valor:

Ver código de ejemplo

html

<template>
    <div>
        <button @click.prevent="configs.value = 10">Cambiar valor</button>
        <span>animate: "false"</span>
    </div>
    <p>Valor: {{configs.value}}</p>
    <v-slider
        v-model="configs.value"
        :start="configs.start"
        :range="configs.range"
        :animate="configs.animate"
    ></v-slider>
    <br>
    <div>
        <button @click.prevent="configs2.value = 10">Cambiar valor</button>
        <span>animate: "true"</span>
    </div>
    <p>Valor: {{configs2.value}}</p>
    <v-slider
        v-model="configs2.value"
        :start="configs2.start"
        :range="configs2.range"
        :animate="configs2.animate"
    ></v-slider>
</template>
<script setup>
    import { reactive } from 'vue';

    const configs = reactive({
        value: null,
        start: 40,
        animate: false,
        range: {
            'min': 0,
            'max': 100
        },
    });

    const configs2 = reactive({
        value: null,
        start: 40,
        animate: true,
        range: {
            'min': 0,
            'max': 100
        },
    });
</script>

handleAttributes

Se pueden agregar atributos adicionales a los controladores del control deslizante utilizando la opción handleAttributes.

Tipo: Array

Valores:

Ver código de ejemplo

html

<template>
    <p>Valores: {{configs.values}}</p>
    <v-slider
        v-model="configs.values"
        :start="configs.start"
        :handleAttributes="configs.handleAttributes"
        :range="configs.range"
    ></v-slider>
</template>
<script setup>
    import { reactive } from 'vue';

    const configs = reactive({
        values: null,
        start: [10, 120],
        handleAttributes: [
            { 'aria-label': 'lower' },
            { 'aria-label': 'upper' },
        ],
        range: {
            'min': 0,
            'max': 100
        }
    });
</script>

keyboardSupport

El soporte para teclado esta compuesto por 3 props.

Documentación original

keyboardSupport
Tipo: Boolean
Default: true

keyboardDefaultStep
Tipo: Number
Default: 5

keyboardPageMultiplier
Tipo: Number
Default: 10

Aquí el tamaño del paso del teclado es 20, que es igual a range / keyboardDefaultStep

Valor:

Ver código de ejemplo

html

<template>
    <p>Valor: {{configs.value}}</p>
    <v-slider
        v-model="configs.value"
        :start="configs.start"
        :keyboardSupport="configs.keyboardSupport"
        :keyboardDefaultStep="configs.keyboardDefaultStep"
        :keyboardPageMultiplier="configs.keyboardPageMultiplier"
        :range="configs.range"
    ></v-slider>
</template>
<script setup>
    import { reactive } from 'vue';

    const configs = reactive({
        value: null,
        start: 10,
        keyboardSupport: true,
        keyboardDefaultStep: 5,
        keyboardPageMultiplier: 10,
        range: {
            'min': 0,
            'max': 100
        }
    });
</script>

Aquí el tamaño del paso del teclado es 50, que es igual a keyboardDefaultStep * keyboardPageMultiplier

Valor:

Ver código de ejemplo

html

<template>
    <p>Valor: {{configs.value}}</p>
    <v-slider
        v-model="configs.value"
        :start="configs.start"
        :step="configs.step"
        :keyboardSupport="configs.keyboardSupport"
        :keyboardDefaultStep="configs.keyboardDefaultStep"
        :keyboardPageMultiplier="configs.keyboardPageMultiplier"
        :keyboardMultiplier="configs.keyboardMultiplier"
        :range="configs.range"
    ></v-slider>
</template>
<script setup>
    import { reactive } from 'vue';

    const configs = reactive({
        value: null,
        start: 100,
        step: 1,
        keyboardSupport: true,
        keyboardDefaultStep: 5,
        keyboardPageMultiplier: 100,
        keyboardMultiplier: 50,
        range: {
            'min': 0,
            'max': 1000
        }
    });
</script>

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:

Tipo: String
Default: tap
Valores aceptados: drag | drag-fixed | tap | tap-drag | hover | unconstrained-tap | none

Opciones detalladas

Valor:

Ver código de ejemplo

html

<template>
    <p>Valores: {{configs.values}}</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],
        step: 10,
        behaviour: 'drag',
        connect: true,
        range: {
            'min': 20,
            'max': 80
        }
    });
</script>

tooltips

Se proporciona un tooltip básico utilizando la opción tooltips. Esta opción también puede aceptar opciones de formato para dar formato al contenido del tooltip. En ese caso, pasa un array con un formateador para cada control, true para usar el formato predeterminado o false para no mostrar ningún tooltip.

Tipo: Array | Boolean | Function
Default: false

Valor:

Ver código de ejemplo

html

<template>
    <p>Valor: {{configs.values}}</p>
    <v-slider
        v-model="configs.values"
        :start="configs.start"
        :tooltips="configs.tooltips"
        :range="configs.range"
    ></v-slider>
</template>
<script setup>
    import { reactive } from 'vue';

    const configs = reactive({
        values: null,
        start: [20, 80, 120],
        tooltips: [
            // Sin tootip
            false,
            // Con tootip
            true,
            // Con tootip formateado
            (value) => {
                const result = value.toFixed(2);

                return `+${result}%`;
            },
        ],
        range: {
            'min': 0,
            'max': 200
        }
    });
</script>

format

Para formatear la salida de valores, se ofrece una opción format.

Puedes especificar las funciones to y from para codificar y decodificar los valores.

De forma predeterminada, se formateará la salida con 2 decimales.

Tipo: Object
Estructura:

{
    to: (value) => {},
    from: (value) => {},
}

Valor:

Valor sin codificar:

Ver código de ejemplo

html

<template>
    <p>Valor: {{configs.value}}</p>
    <p>Valor sin codificar: {{configs.unencodedValue}}</p>
    <v-slider
        v-model="configs.value"
        :start="configs.start"
        :step="configs.step"
        :range="configs.range"
        :format="configs.format"
        @update="decodeValue"
    ></v-slider>
</template>
<script setup>
    import { reactive } from 'vue';

    const configs = reactive({
        value: null,
        unencodedValue: null,
        start: 20,
        step: 1,
        range: {
            'min': 20,
            'max': 80
        },
        format: {
            // Este método recibe el numero y retorna un texto formateado
            to: function (value) {
                return value + ',-';
            },
            // Este método recibe el texto formateado y retorna un numero
            from: function (value) {
                return Number(value.replace(',-', ''));
            },
        },
    });

    const decodeValue = ctx => {
        if (ctx.unencoded.length) {
            configs.unencodedValue = ctx.unencoded[0]
        }
    };
</script>

pips

La característica pips permite la generación de puntos a lo largo del slider.

Se pueden configurar cinco opciones:

mode para determinar dónde colocar los puntos.
values como opciones adicionales para el modo.
stepped para redondear los valores de los puntos según el paso del control deslizante
density para pre-escalar el número de puntos
filter para modificar manualmente el tamaño de los puntos.

El valor de density controla cuántos puntos se colocan en un porcentaje del rango del control deslizante. Con el valor predeterminado de 1, hay un punto por cada porcentaje. Con un valor de 2, se coloca un punto cada 2 porcentajes. Un valor inferior a uno colocará más de un punto por porcentaje.

Mas información en la documentación del componente

Valor:

Ver código de ejemplo

html

<template>
    <p>Valor: {{configs.value}}</p>
    <v-slider
        v-model="configs.value"
        :start="configs.start"
        :range="configs.range"
        :pips="configs.pips"
    ></v-slider>
</template>
<script setup>
    import { reactive } from 'vue';

    const configs = reactive({
        value: null,
        start: 0,
        range: {
            'min': [0],
            '10%': [5, 5],
            '50%': [40, 10],
            'max': [100]
        },
        pips: {
            mode: 'steps',
            density: 3,
            filter: (value, type) => {
                if (type === 0) {
                    return value < 20 ? -1 : 0;
                }
                return value % 10 ? 2 : 1;
            },
            format: {
                to(value) {
                    const result = Number(value).toFixed(2);

                    return result + "€";
                },
            },
        }
    });
</script>

pipsys

Si esta opción esta presente se creara una configuración básica de pips.

Valor:

Ver código de ejemplo

html

<template>
    <p>Valor: {{configs.value}}</p>
    <v-slider
        v-model="configs.value"
        :start="configs.start"
        :step="configs.step"
        :range="configs.range"
        pipsys
    ></v-slider>
</template>
<script setup>
    import { reactive } from 'vue';

    const configs = reactive({
        value: null,
        start: 0,
        step: 10,
        range: {
            'min': 0,
            'max': 100
        },
    });
</script>

snap

Cuando se utiliza un slider con pasos, tu configuración puede requerir que ciertos pasos no estén disponibles. Usando la función snap, se puede crear este efecto.

Observa cómo 40 y 80 no se pueden seleccionar en el control deslizante.

Tipo: Boolean

Valores:

Ver código de ejemplo

html

<template>
    <p>Valores: {{configs.values}}</p>
    <v-slider
        v-model="configs.values"
        :start="configs.start"
        :snap="configs.snap"
        :range="configs.range"
    ></v-slider>
</template>
<script setup>
    import { reactive } from 'vue';

    const configs = reactive({
        values: null,
        start: [20, 90],
        range: {
            'min': 0,
            '10%': 10,
            '20%': 20,
            '30%': 30,
            // Nope, 40 is no fun.
            '50%': 50,
            '60%': 60,
            '70%': 70,
            // I never liked 80.
            '90%': 90,
            'max': 100
        },
        snap: true,
    });
</script>

disable

Permite deshabilitar el componente.

Tipo: Boolean
Default: false

Valor:

Ver código de ejemplo

html

<template>
    <button @click="configs.disable = !configs.disable">{{configs.disable ? 'Habilitar' : 'Deshabilitar'}}</button>
    <p>Valor: {{configs.value}}</p>
    <v-slider
        v-model="configs.value"
        :start="configs.start"
        :range="configs.range"
        :disable="configs.disable"
    ></v-slider>
</template>
<script setup>
    import { reactive } from 'vue';

    const configs = reactive({
        value: null,
        disable: false,
        start: 5,
        range: {
            min: 1,
            max: 10,
        },
    });
</script>

Props ​

modelValue ​

range ​

start ​

connect ​

step ​

margin ​

padding ​

limit ​

direction ​

orientation ​

animate ​

handleAttributes ​

keyboardSupport ​

keyboardSupport ​

keyboardDefaultStep ​

keyboardPageMultiplier ​

behaviour ​

tooltips ​

format ​

pips ​

pipsys ​

snap ​

disable ​

Props

modelValue

range

start

connect

step

margin

padding

limit

direction

orientation

animate

handleAttributes

keyboardSupport

keyboardSupport

keyboardDefaultStep

keyboardPageMultiplier

behaviour

tooltips

format

pips

pipsys

snap

disable