Blog Detail


A Simple Range Slider Component Made With Vue JS  cover image

arrow_back A Simple Range Slider Component Made With Vue JS

Mohammadreza Khani Saniji has launched a Vue js Range Slider component which offers a way to change Your numeric value or numeric range value with dragging handles. It is a simple and lightweight component based on Vue js. It has the following remarkable features:

  • Single value and range slider support
  • Logarithmic and linear scale support
  • Offers Keyboard support
  • Provides RTL support


It requires a minimum 2.2+ version of Vue js.

You can view its demo here.

A Quick Start

You can install this via npm or yarn:

npm install vue-simple-range-slider 


yarn add vue-simple-range-slider 


You’ve to include this in your Vue component same as the given example:


                    style="width: 300px" 







                    style="width: 300px" 





import VueSimpleRangeSlider from 'vue-simple-range-slider'; 

import 'vue-simple-range-slider/dist/vueSimpleRangeSlider.css' 

export default { 

    // register the component 

    components: { VueSimpleRangeSlider }, 

    data() { 

          return { 

               range: [20,1000], 

               number: 10 






Name Type Default
value number Or [number, number] -
min number 0
max number 100
logarithmic boolean false
barColor string #bebebe
activeBarColor string #6699ff

You can get its CDNs here:

If you want to learn more about it. You can view its documentation and get its source code on Github.

Published at : 23-08-2021

Author : Rizwan Aslam
Rizwan Aslam

I am a highly results-driven professional with 12+ years of collective experience in the grounds of web application development especially in laravel, native android application development in java, and desktop application development in the dot net framework. Now managing a team of expert developers at Codebrisk.

Launch your project

Launch project