A snippet to make jPlayer volume bar draggable.

jplayer.draggable.js

$('.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
		if (volume > 1) {
			$("#JPID").jPlayer("volume", 1);
		} else if (volume <= 0) {
			$("#JPID").jPlayer("mute");
		} else {
			$("#JPID").jPlayer("volume", volume);
			$("#JPID").jPlayer("unmute");
		}
	});
	return false;
})
.mouseup(function() {
  $(window).unbind("mousemove");
});

For anyone else using a vertical volume bar, besides swapping width w/ height, x w/ y, and left w/ top, you also need to change the volume calculation to 1 - y/height, otherwise the dragging is reversed.

Also, it might be better to put the mouseup event on the document itself, to make sure it lets go properly.

Here #JPID is the id of the div where we have applied jplayer? If yes then what's the solution this code offers to the problem of multiple jplayer initiations? Like 100s of jplayer initiations.

This is what I ended up with after finding the snippet. Mouseup on the actual volume bar will never fire if the user drags his mouse outside of the volume bar element, so we bind the mouseup on document level instead.

Overdragging also means the default jplayer volume event never fires so I added a volume callback there and got rid of the mute parts that were kinda redundant.

I also added code to update the actual value of the volume bar during the drag, so the user can see the volume slider move during the drag.

$('.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");
    });

same can be applied to seek bar as well with small changes;

  $('.jp-seek-bar').mousedown(function() {
    var parentOffset = $(this).offset(),
    width = $(this).width();
    $(window).mousemove(function(e) {
      var x = e.pageX - parentOffset.left,
      currentPosition = x/width
      var barValue = Math.floor(currentPosition*100);
      if (barValue < 0 ) barValue = 0;
      if (barValue > 100) barValue = 100;
      $(".jp-play-bar").css("width", barValue + "%");
    });
    return false;
  })
  $(document).on("mouseup", function() {
    $(window).unbind("mousemove");
  });

Cafer, that code for the seek bar is great, but it glitches between the scrub position and the current playing position if the media is playing. Any thoughts on how to stop that? I tried to make the playBar update process pause by adding a global 'isScrubbing' boolean variable, but no success so far.

JohnnyOutdoors, replace
$(".jp-play-bar").css("width", barValue + "%");
to
$("#player").jPlayer( "playHead", barValue );