Slim Track & Volume Slider For Media Player - oyoslider

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:

2022-03-03

• JS updated

---

This awesome jQuery plugin is developed by oyosoftware. For more Advanced Usages, please check the demo page or visit the official website.