Vue Range Slider - A Simple HTML5 Input Form Control

Overview

The Vue Range Slider is an HTML5 input control that is used to select a value or range of values. Select a relative quantity value by moving a thumb along a bar. The control has major/minor ticks, thumb, and tooltip that can be fully customized. Also, the control can be aligned horizontally or vertically.

Touch-friendly and responsive

The Vue Range Slider component recognizes touch gestures, allowing the user to swipe left or right to change the value of the slider. The responsive, touch-friendly design provides the best user experience on all phone, tablet, and desktop form factors.

• Check Vue slider examples in different mobile devices

Tooltips

The tooltip displays slide value information when the mouse pointer moves the thumb over the bar. The same can be done on mobile devices by touch events.

• HTML Form slider tooltip example

Built-in and customizable themes

Several built-in, Sass-based themes are available: Fluent, Tailwind CSS, Bootstrap 5, Bootstrap, Material, and high contrast. Users can customize these themes by either overriding the existing Sass styles or creating custom themes using the Theme Studio application.

• Theme studio application

Other supported frameworks

The Slider component is also available in Blazor, React, Angular frameworks. Check out the different Slider platforms from the links below:

• Blazor Slider
• Angular Slider
• React Slider
• JavaScript Range Slider

Vue Slider code example

Easily get started with the Vue Slider using a few simple lines of Vue codes as demonstrated below. Also explore our Vue Slider example that shows you how to render and configure a Slider in Vue.

<template>
<div id="app">
<ejs-slider id='default' :value='value'></ejs-slider>
  </div>
</template>
<script>
import Vue from "vue";
import { SliderPlugin } from "@syncfusion/ej2-vue-inputs";
Vue.use(SliderPlugin);

export default {
  data() {
return {
  value: 30
};
  }
}
</script>