oyoslider是一个面向开发人员的轻量级jQuery插件，用于为音频播放器和视频播放器等媒体播放器创建自定义滑块控件（如搜索条和音量滑块）。

如何使用它:

1.在jQuery之后加载oyoslider插件。

<link rel="stylesheet" href="oyoslider.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/oyoslider.js"></script>

2.创建一个新的oyoslider实例。可用参数：

• 滑块宽度：滑块的宽度
• 滑块高度：滑块的高度
• 滑块边框半径：滑块的边界半径属性
• 轨迹宽度：轨道宽度
• 轨迹高度：轨道高度
• 轨迹边界半径：轨道的边界半径特性
• 拇指宽度：拇指宽度
• 拇指高度：拇指高度
• 拇指边框半径：拇指的边界半径特性

// oyoSlider(sliderWidth, sliderHeight, sliderBorderRadius, trackWidth, trackHeight, trackBorderRadius, thumbWidth, thumbHeight, thumbBorderRadius);
mySlider = new oyoSlider();

3.这些API方法使您能够完全控制滑块。

// 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;

更新日志：

2022-03-03

• JS已更新

预览截图

媒体播放器 纤薄音轨和音量滑块 oyoslider