Blog Detail

23

Aug
A Simple Range Slider Component Made With Vue JS cover image

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

Requirements

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 

Or 

yarn add vue-simple-range-slider 

Usage

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

<template> 
  <div> 
    <VueSimpleRangeSlider 

                    style="width: 300px" 

                    :min="0" 

                    :max="1000000" 

                    :logarithmic="true" 

                    v-model="range" 

            /> 

    <VueSimpleRangeSlider 

                    style="width: 300px" 

                    :min="0" 

                    :max="20" 

                    v-model="number" 

            /> 
  </div> 
</template> 


<script> 
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 

          } 

    } 

} 

</script> 

Props

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:

https://cdn.jsdelivr.net/npm/vue-simple-range-slider

https://unpkg.com/vue-simple-range-slider

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
AUTHOR
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.

web application development client
web application development client
web application development client
web application development client
web application development client

Launch project