Skip to content

Instantly share code, notes, and snippets.

@redfellow
Last active June 20, 2017 18:46
Show Gist options
  • Save redfellow/feef3ae0d8e4f6b7f4ad to your computer and use it in GitHub Desktop.
Save redfellow/feef3ae0d8e4f6b7f4ad to your computer and use it in GitHub Desktop.
This lets the user drag the jPlayer volume bar instead of just clicking a new volume value. Substitute #player and .jp-volume-bar-value with your own selectors. If you are using a horizontal volume bar, you'll have to hack in negative values instead.
$('.jp-volume-bar').mousedown(function() {
var parentOffset = $(this).offset(),
width = $(this).width();
$(window).mousemove(function(e) {
var x = e.pageX - parentOffset.left,
volume = x/width
var barValue = Math.floor(volume*100);
if (barValue < 0 ) barValue = 0;
if (barValue > 100) barValue = 100;
jQuery(".jp-volume-bar-value").css("width", barValue + "%");
$("#player").jPlayer("volume", volume);
});
return false;
})
$(document).on("mouseup", function() {
$(window).unbind("mousemove");
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment