Vue Custom Range Slider Component for Volume or Audio/Video progress control.
This is a default range slider alternative for volume/video/audio progress control created with Vue Js. Stop using input type="range" for volume or audio/video progress control in a audio/video platform. To help you, I made a Custom Range Slider Component in Vue 3 with it's powerful composition API. You can customize the look, widths, heights, colors and even show/hide any parts based on your needs, in short you can customize anything without even editing the component itself.
Vue Custom Range Slider Examples
See examples here:How to use it?
It's so easy
Getting value and setting it
You can use v-model directive on the component to get the slider position value and use it to set the volume or video/audio progress as per your need. You'll get more clear idea if you visit the example above.
Available Props:
rangeContainerHeight
- Set the height of the range slider container. default: 7px
.
NOTE: Set the height bigger than the range slider height. since it's the background of the slider and will be used for hover effect/animation
rangeHeight
- Set the height of the range slider itself. default: 3px
.
thumbHeight
- Set the height of the thumb indicator. default: 200%
.
NOTE: Remember to use percentage value to keep the ratios
rangeBgColor
- Range Slider background color. default: `rgba(100, 100, 100, .5)`
thumbColor
- Thumb Indicator color. default: `red`
previewColor
- Preview Bar Color. default: rgb(150, 150, 150)
.
progressColor
- Progress Bar Color(Main Indicator). default: red
.
expandOnHover
- hover effect animation as like in youtube video player. default: false
.
AlwaysShowThumb
- show the thumb indicator always. default: false
.
noPreviewBar
- hide the preview indicator. default: false
.
noProgressBar
- hide the Progress/Main Indicator bar. default: false
.
noThumb
- hide the thumb indicator always. default: false
.
Providing a default position:
This is simple. add a v-model directive and pass the default value in the reactive variable itself.
Example:
Defining the varibale:
const value = ref(0.4)
Usage in the component:<custom-range-slider v-model="value"></custom-range-slider>
This an extremly needed feature. Sometimes we want to set a default progress position from the server or browser localstorage. Imagine you want to add a continue watching feature to yourAudio/Video
file or maybe you want to give the users the ability to set the volume once and even after reloading the page the volume should not change.