I am looking for a fancy Slider control using JQuery/Javascript. The native JQuery slider is rather bland for this requirement. The slider will be used to specify the volume in the increments of 5. So, this slider should only let user slide in increments of 5.
One nice to have feature is to be able to show label above the slider position indicating what volume the user has selected.
Here's an example of the customization you're after that uses the jQuery UI Slider. It's all CSS in the background, you can customize the hell out of it.
Setting the snap you can do increments and update the amount like this:
$("#mySlider").slider({
orientation: "vertical",
range: "min",
min: 0,
max: 100,
step: 5,
slide: function(event, ui) {
$("#amount").val(ui.value);
}
});
$("#amount").val($("#mySlider").slider("value"));
I've found a nice volume slider. I think this is what you're looking for. It's the classic triangle-shaped controller with increasing vertical bars. And it's very customizable with position indicator. Download the zip file here: http://ruwix.com/javascript-volume-slider-control/
