All Components

Slider Overview

The Slider enables the user to increase, decrease, and select predefined values by dragging its handle along the track, or by clicking the side arrow buttons.

The component enables you to set minimum and maximum values, define its horizontal or vertical orientation, determine its small and large steps, and adjust the format and position of its tooltip.

The Slider wrapper for Vue is a client-side wrapper for Kendo UI Slider widget.

Basic Usage

The following example demonstrates the Slider in action.

<div id="vueapp" class="vue-app">
    <kendo-slider v-model="value"
                  :orientation="'vertical'"
                  :min="10"
                  :max="50"
                  :small-step="1"
                  :large-step="10">
    </kendo-slider>
</div>
Vue.use(InputsInstaller);

new Vue({
    el: "#vueapp",
    data () {
        return {
            value: "20"
        }
    }
})

Events

The following example demonstrates basic Slider events. You can subscribe to all Slider events by the handler name.

<div id="vueapp" class="vue-app">
    <kendo-slider v-on:slide="onSlide"></kendo-slider>
</div>
Vue.use(InputsInstaller);

new Vue({
    el: "#vueapp",
    methods: {
        onSlide (e) {
            console.log(e.value);
        }
    }
})
In this article