Simple Single & Range Slider Component For Vue 3/2

Install & Download:

Description:

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: