Home Javascript A Simple Vue Range Slider Bar Component

A Simple Vue Range Slider Bar Component

Slide Bar is a Vue.js component that allows you to create customizable range slider controls in your web application.

range slider for vue js, vue slider component, multi range slider vue, vue 3 range slider, nuxt range slider, vue range slider npm

Lightweight Customizable Range Slider With labels | rangeslide.js

How to make use of it:

Install

npm install vue-slide-bar --save
or
yarn add vue-slide-bar

Usage

// main.js
import Vue from 'vue'
import VueSlideBar from 'vue-slide-bar'

Vue.component('VueSlideBar', VueSlideBar)

// xxx.vue
import VueSlideBar from 'vue-slide-bar'

export default {
  components: {
    VueSlideBar
  }
}

Props

Props	Type	Default	Description
v-model	Number,String	0	Initial value (v-model)
min	Number	0	Minimum value
max	Number	100	Maximum value
process-style	Object	null	Process bar style.
tooltip-styles	Object	null	Tooltip style.
label-style	Object	null	Label style.
data	Array	null	Custom data.
is-disabled	Boolean	false	Flag for disable slider bar
draggable	Boolean	true	Flag for active/disable draggable
show-tooltip	Boolean	true	Flag display tooltip
icon-width	Number	20	Icon width
line-height	Number	5	Line height
speed	Number	0.5	Transition time
paddingless	Boolean	false	Remove padding and min-height

Name	Description
input	triggered on value change
callbackRange	triggered on range value change
dragStart	triggered on start drag
dragEnd	triggered on stop drag

Name	Description
tooltip	Customize the tooltip slot.

Minimal Range Slider Control, Vue Slide Bar Plugin/Github

Official Website(biigpongsatorn): Click Here

This superior jQuery/javascript plugin is developed by biigpongsatorn. For extra advanced usage, please go to the official website.