Slider

Under Development
# Documentation

Slider is another basic component from light vue which provide user to have a slider in the web application which can be used to rate or select a range.

# Playground
 <LvRangeSlider
     sliderColor="#607c8a"
     trackColor="#e2e2e2"
     :min="10"
     :max="100"
     :step="5"
     :showValue="true"
 />
Realtime Customizations








#Basic Usage

Use the LvRangeSlider with some basic and complex use cases by passing either classes or props. LightVue slider is Both compatible with Vue 2.x and Vue 3.x

#Custom Range

You can set the Custom range to the slider by Combining the minimum and maximum values through min & max props.

#Floating label

You can show/hide the floating label which contains the value by setting showValue prop. Default value is true

#Set Slider Color

You can Change the slider color by passing a string in sliderColor prop.Default value is #607c8a

#Set Track Color

You can Change the Track color by passing a string in trackColor prop.Default value is #e2e2e2

#Step

You can Change the step count by passing a number in step prop.

#Setup

You can import a component and register it as a local and global vue component as follows:

// import the component
import LvSlider from 'lightvue/slider';
// Register the component locally
export default {
    components: {
        LvSlider
    }
}
// Register the component globally (Vue 2.x)
Vue.component('LvSlider', LvSlider);

// Register the component globally (Vue 3.x)
const app = Vue.createApp({
  // ...
});
app.component('LvSlider', LvSlider);
app.mount('#app')
               

#APIs

All of the props, events and slots of the component are mentioned below:

Props
Type
Default
Description
value
Number, Array
Configures the value of slider.
min
Number
0
Configures the min value of slider
max
Number
100
Configures the max value of slider
step
Number
null
Configures the value to step and down while sliding.
disabled
Boolean
false
Configures if the slider is disabled or not.
showValue
Boolean
false
Configures if the value Tooltip is disabled or not.
sliderColor
String
#607c8a
Configures the slider color.
trackColor
String
#e2e2e2
Configures the track color.