Question

I am using jMediaelement for a customized HTML5 audio player. Unfortunately, client now needs a vertical volume slider.

When calling the jMediaelement API, I can only use this markup:

 <div class="volume-slider" title="volume slider"></div>

…which will be replaced by a horizontal volume slider.
How can I adjust the volume handle to be vertical (from bottom=silent to top=loud)?

PS: I already opened an issue at Sourceforge, however, no answer yet.

Answer 1

Fortunately, Alexander replied to the question himself.
Here’s his working solution:

It’s quite simple. JME uses jQuery-UI slider and jQuery-UI
automatically detects wether you want a vertical or horizontal slider
by your CSS. The only thing you have to do is to give your slider a
bigger height than a bigger width.

The following css would create a vertical slider:

.volume-slider {
    height: 300px;
    width: 20px;
}

If this doesn’t help, you can pass a vertical option to the slider.