Slim Track & Volume Slider For Media Player - oyoslider
File Size: | 9.47 KB |
---|---|
Views Total: | 1550 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

oyoslider is a lightweight, developer-oriented jQuery plugin to create custom slider controls (like seek bars and volume sliders) for media players like audio players and video players.
How to use it:
1. Load the oyoslider plugin after jQuery.
<link rel="stylesheet" href="oyoslider.css" /> <script src="/path/to/cdn/jquery.slim.min.js"></script> <script src="/path/to/oyoslider.js"></script>
2. Create a new instance of the oyoslider. Available parameters:
- sliderWidth: width of the slider
- sliderHeight: height of the slider
- sliderBorderRadius: border-radius property of the slider
- trackWidth: width of the track
- trackHeight: height of the track
- trackBorderRadius: border-radius property of the track
- thumbWidth: width of the thumb
- thumbHeight: height of the thumb
- thumbBorderRadius: border-radius property of the thumb
// oyoSlider(sliderWidth, sliderHeight, sliderBorderRadius, trackWidth, trackHeight, trackBorderRadius, thumbWidth, thumbHeight, thumbBorderRadius); mySlider = new oyoSlider();
3. These API methods give you the full control over the slider.
// change the appearance of the slider mySlider.change(width, height, borderRadius, color); // change the appearance of the track mySlider.changeTrack(width, height, borderRadius, beforeColor, afterColor); // change the appearance of the thumb mySlider.changeThumb(width, height, borderRadius, color); // change the color of the slider mySlider.changeColor(color); // change the color of the track mySlider.changeTrackColors(beforeColor, afterColor); // change the color of the thumb mySlider.changeThumbColor(color); // reset all colors mySlider.resetColors(); // enable the slider mySlider.enable(); // disable the slider mySlider.disable(); // set/get the min value mySlider.min = 0; // set/get the max value mySlider.max = 25; // set/get the step size mySlider.step = 1; // set/get the current value mySlider.vaue = 10;
Changelog:
2024-10-29
- JS updated
This awesome jQuery plugin is developed by oyosoftware. For more Advanced Usages, please check the demo page or visit the official website.