Animation

Animacion v-model: 50

Duracion (ms)

Enable animation

Animation adds a smooth transition when the slider changes value on tap or when using .set():

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

Custom duration

By default the animation lasts 300ms. You can customize the duration:

<Slider
    v-model="value"
    :range="{ min: 0, max: 100 }"
    :animate="true"
    :animation-duration="500"
    behaviour="tap"
/>

Disable animation

<Slider
    v-model="value"
    :range="{ min: 0, max: 100 }"
    :animate="false"
/>

TIP

Both animate and animationDuration are reactive. You can change them at runtime and the slider updates automatically.