Question

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.

Answer 1

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"));