oyoslider is a lightweight jQuery plugin directed at developers for creating custom slider controls such as search bars and volume sliders for media players such as audio and video players.

Features

• Browser-independent scroll bar.
• The slider can be enabled/disabled.
• Automatic value change can also be set.
• The minimum value, the maximum value, and the step can be specified.
• Cursor key control can be assigned to another item.
• Colors can be changed.
• All parts can be resized.

How to make use of 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 oyoslider.

// oyo<a href=" ">Slider</a>(sliderWidth, sliderHeight, sliderBorderRadius, trackWidth, trackHeight, trackBorderRadius, thumbWidth, thumbHeight, thumbBorderRadius);
mySlider = new oyoSlider();

3. These API methods give you complete 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;

See Demo And Download

Official Website(oyosoftware): Click Here

This superior jQuery/javascript plugin is developed by oyosoftware. For extra Advanced usage, please go to the official website.