Kendo UI for Vue Native RangeSlider Overview
The Native RangeSlider enables the user to increase, decrease, and select predefined values by dragging its handle along the track or by clicking the value on the scale or using the arrow keys.
The Kendo UI for Vue Native RangeSlider component is part of the Kendo UI for Vue library of Vue components. It is distributed through NPM under the kendo-vue-inputs NPM package.
The following example demonstrates the RangeSlider in action.
Example
View Source
Change Theme:
Key Features
- Labels—You can use labels to define names for specific positions on the RangeSlider.
- Orientation—You can render the RangeSlider vertically or horizontally.
- Disabled—To prevent users from interacting with the RangeSlider, you can render it as disabled.
- Controlled mode—Take advantage of the built-in options that allow you to control the value of the RangeSlider.
- Keyboard navigation—The RangeSlider support numerous keyboard shortcuts that allow users to interact with the component.
- Accessibility—The RangeSlider is accessible for screen readers and provides full WAI-ARIA support.
Support and Learning Resources
- RangeSlider Homepage
- Getting Started with the Kendo UI Vue Inputs
- API Reference of the RangeSlider Component
- Getting Started with Kendo UI for Vue - JavaScript (Online Guide)
- Getting Started with Kendo UI for Vue - TypeScript (Online Guide)
- Getting Started with Kendo UI for Vue - JavaScript + Options API (Online Guide)
- Getting Started with Kendo UI for Vue - TypeScript + Options API (Online Guide)
- Getting Started with Kendo UI for Vue - Nuxt 3 (Online Guide)
- Virtual Classroom (Training Course for Registered Users)
- RangeSlider Forum
- Knowledge Base
- Kendo UI Productivity Tools extension for VS Code
