Simple Single & Range Slider Component For Vue 3/2

A simple single value & range slider component for Vue 3 and Vue 2. It makes it easy to change numeric or range values with dragging handles. Keyboard & RTL are supported as well.

How to use it:

1. Import the slider component.

// Vue 3
import VueSimpleRangeSlider from "vue-simple-range-slider";
import "vue-simple-range-slider/css";
import { reactive, defineComponent } from "vue";
export default defineComponent({
  components: { VueSimpleRangeSlider },
});
// Vue 2
import VueSimpleRangeSlider from "vue-simple-range-slider/vue2";
import "vue-simple-range-slider/vue2/css";

2. Add the slider component to the app.

<template>
  <div>
    <VueSimpleRangeSlider />
    </VueSimpleRangeSlider>
  </div>
</template>

3. Default component props.

min: 0,
max: 100,
exponential: false,
activeBarColor: '#7e7e7e',
barColor: '#bebebe',
keepJustSignificantFigures: true,
significantFigures: 2

4. Events.

  • @input([number,number]) => void (Vue 2)
  • @update:model-value([number,number]) => void (Vue 3)

Preview:

Simple Single & Range Slider Component

Download Details:

Author: mohamadkhani

Live Demo: https://stackblitz.com/edit/vue-simple-range-slider-example?embed=1&file=src/App.vue&view=preview

Download Link: https://github.com/mohamadkhani/vue-simple-range-slider/archive/refs/heads/master.zip

Official Website: https://github.com/mohamadkhani/vue-simple-range-slider

Install & Download:

Add Comment