Advanced configuration

Margin and Limit

Margin: 10, Limit: 50 v-model: [30,60]

Margin

Minimum distance between handles:

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

Handles cannot get closer than 10 units to each other.

WARNING

Not compatible with behaviour="unconstrained".

Limit

Maximum distance between handles (opposite of margin):

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

Handles cannot be more than 50 units apart.

WARNING

Not compatible with behaviour="unconstrained".

Padding

Padding asimetrico: [10, 20] v-model: 50

Minimum distance from the edges of the range:

<!-- Symmetric -->
<Slider
    v-model="value"
    :range="{ min: 0, max: 100 }"
    :padding="10"
/>

<!-- Asymmetric -->
<Slider
    v-model="value"
    :range="{ min: 0, max: 100 }"
    :padding="[10, 20]"
/>

Snap

Snap con rango no lineal v-model: 50

Forces the slider to jump between values defined in range:

<Slider
    v-model="value"
    :range="{
        min: 0,
        '25%': 25,
        '50%': 50,
        '75%': 75,
        max: 100
    }"
    :snap="true"
/>

Keyboard

<Slider
    v-model="value"
    :range="{ min: 0, max: 100 }"
    :keyboard-support="true"
    :keyboard-default-step="10"
    :keyboard-page-multiplier="5"
    :keyboard-multiplier="1"
/>

Prop	Default	Description
keyboardSupport	true	Enable/disable keyboard support
keyboardDefaultStep	10	Default step for arrow keys
keyboardMultiplier	1	Multiplier for arrow keys
keyboardPageMultiplier	5	Multiplier for Page Up/Down

Handle Attributes

Custom HTML attributes per handle:

<Slider
    v-model="values"
    :range="{ min: 0, max: 100 }"
    :handle-attributes="[
        { 'aria-label': 'Minimum price' },
        { 'aria-label': 'Maximum price' }
    ]"
/>

Custom CSS

CSS prefix

<Slider
    v-model="value"
    :range="{ min: 0, max: 100 }"
    css-prefix="custom-slider-"
/>

CSS classes

<Slider
    v-model="value"
    :range="{ min: 0, max: 100 }"
    :css-classes="{
        target: 'my-slider',
        handle: 'my-handle',
    }"
/>

Non-linear ranges

Rango no lineal v-model: 500

noUiSlider supports ranges with non-linear distribution:

<Slider
    v-model="value"
    :range="{
        min: 0,
        '10%': 100,
        '50%': 500,
        max: 1000
    }"
/>

TIP

In non-linear ranges, the global step only applies to the first segment. To define step per segment, use the [value, step] syntax:

range: {
    min: [0, 10],
    '50%': [500, 100],
    max: 1000
}