Slider
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
#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: