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

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.