All Components

RangeSlider Overview

The RangeSlider displays and allows the user to select a range of values.

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

Basic Usage

The following example demonstrates the RangeSlider in action.

<div id="vueapp" class="vue-app">
    <kendo-rangeslider :selection-start="start"
                       :selection-end="end"
                       :min="0"
                       :max="100">
    </kendo-rangeslider>
</div>
Vue.use(InputsInstaller);

new Vue({
    el: "#vueapp",
    data () {
        return {
            start: 25,
            end: 75
        }
    }
})

Features and Functionalities

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 following example demonstrates how to configure the properties of the RangeSlider.

<div id="vueapp" class="vue-app">
    <kendo-rangeslider :min="0"
                       :max="1"
                       :large-step="0.1"
                       :small-step="0.05"
                       :orientation="'vertical'"
                       :tooltip-format="'{0:p}'">
    </kendo-rangeslider>
</div>
Vue.use(InputsInstaller);

new Vue({
    el: "#vueapp"
})
In this article