No sé si voy a aportar algo útil. Pero desde que leí el tema me quedé pensando en darle una vuelta más al asunto, y terminé haciendo otra versión.
Antes de la introducción al ejemplo, quería comentar que el uso de una imagen tiene la ventaja de que permite el mapeo, y eventos
onmouseover, onclick, ondragstart, ... a cada una de las áreas. Eso facilita usarlo no sólo como "gráfico" sino también como control, tal como propuso
emprear.
El detalle de tu método,
lubtufano, es justamente que está hecho con una imagen, que hay que agregarla. No es grave, porque el gráfico de volumen no es nativo de ningún navegador y es obvio que hay que agregarlo por nuestra cuenta; pero como las imágenes son rectangulares, y necesitamos el "triángulo" transparente como "ventana" para ver la animación, nos pasa que la otra mitad debe ser del color del fondo para que termine disimulada.
Y si el fondo tiene diseño, o es una barra flotante ya no nos sirve. Hay que inventar otra cosa.
Quise bajar dos pájaros de un hondazo, y preparé un ejemplo que no trae imágenes, y permite que la mitad que no se usa quede transparente. No sé en cuántos navegadores funcionará, pero es cuestión de probar. (Descarté
canvas,
VML y
SVG porque ya sabemos que no son totalmente compatibles.)
Código:
<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8">
<meta http-equiv="msthemecompatible" content="no" >
<title></title>
<style type="text/css">
body {background-color: transparent;
background-image: url('http://imageshack.us/a/img263/8876/lamp1cf6.gif');
background-attachment: fixed; }
h1 {font: 900 250%/270% cursive;
background-color: rgba(50, 0, 0, .65);
text-align: center;
color: red;
text-decoration: underline; }
#barra {width: 100px;
height: 400px;
position: relative;
margin-left: 100px; }
#pista, #nivel {width: 100px;
height: 400px;
position: absolute;
top: 0;
left: 0;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
overflow: hidden;
border-color: silver transparent transparent silver;
border-style: solid;
border-width: 200px 50px; }
#nivel {width: 50px;
height: 200px;
top: 200px;
left: 0;
border-color: lime transparent transparent lime;
border-width: 100px 25px; }
#control1a {background-color: scrollbar;
border: 2px outset;
margin-left: 150px;
color: black; }
#control2a {height: 30px;
width: 200px;
background-color: transparent;
overflow: auto;
margin-left: 150px;
margin-bottom: 50%; }
#control2b {height: 1px;
width: 2200px;
background-color: transparent;}
</style>
<script type="text/javascript">
var alto = 400; /*alto de la barra*/
var ancho = 100; /*ancho de la barra*/
var bravo = alto/2;
var charly = ancho/2;
function cambia(T) {
var alfa = (isNaN(T.value))? T.scrollLeft/2000 : T.value/100 ;
document.getElementById("nivel").style.top = alto - (alto*alfa) + "px";
document.getElementById("nivel").style.width = ancho*alfa + "px";
document.getElementById("nivel").style.borderWidth = bravo*alfa + "px " + charly*alfa +"px";
document.getElementById("nivel").style.height = alto*alfa + "px";
document.title = parseInt(alfa*10);
}
onload = function(){
document.getElementById("control2a").scrollLeft = 1000;
document.body.style.backgroundColor =
"#" + ((Math.floor(Math.random()*4096)+4095).toString(16)).substring(1);
}
</script>
</head>
<body>
<h1>Barra nivel vertical.</h1>
<div id=barra>
<div id=pista></div>
<div id=nivel></div>
</div>
<span id=control1a>
<input type=range min=0 max=100 id=control1b onchange="cambia(this)" value=50 step=1/>
</span>
<div id=control2a onscroll="cambia(this)">
<div id=control2b></div>
</div>
<hr>
</body>
</html>
Para simular el control de volumen use un
input type=range. Pero como aún hay navegadores que no lo muestran, le agregué una barra con botón deslizante debajo. En el código andan los dos, pero por supuesto que mañana quedará sólo el de HTML5.
Alguien se preguntará
"¿y ayer?". Supongo que con el único que habría que hacer una compatibilidad es con IE. Y en la versión 6 ni va a funcionar la transparencia.
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<meta http-equiv="msthemecompatible" content="no" >
<title></title>
<style type="text/css">
body {background-color: black; }
h1 {font: 900 250%/270% cursive;
text-align: center;
color: red; }
#barra {width: 100px;
height: 400px;
position: relative;}
#pista, #nivel {width: 0;
height: 0;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
border-color: silver black black silver;
border-style: solid;
border-width: 200px 50px; }
#nivel {width: 0;
height: 0;
top: 400px;
left: 0;
border-color: lime black black lime;
border-width: 0; }
#control2a {width: 30px;
height: 400px;
overflow-y: auto;
float: left;
scrollbar-face-color: black;
scrollbar-arrow-color: white;
margin-left: 20%; }
#control2b {width: 1px;
height: 2400px;
background-color: black; }
</style>
<script type="text/javascript">
var alto = 400;
var ancho = 100;
var bravo = 0.005*alto;
var charly = 0.005*ancho;
function cambia(T) {
var alfa = T.scrollTop/2000;
var delta = 100 - parseInt(alfa*100)
document.getElementById("nivel").style.top = (alto*alfa) + "px";
document.getElementById("nivel").style.borderWidth = delta*bravo + "px " + delta*charly +"px";
document.title = delta;
}
onload = function() {document.getElementById("control2a").scrollTop = 2000;}
</script>
</head>
<body>
<h1>Barra nivel vertical. (IE6)</h1>
<div id=control2a onscroll="cambia(this)">
<div id=control2b></div>
</div>
<div id=barra>
<div id=pista></div>
<div id=nivel></div>
</div>
</body>
</html>
Como es mi costumbre, ni hay comentarios, ni explicaciones, ni nada.
A probar y destripar.
slidebar / trackbar en html ... Botones tipicos con cabeza de flecha vml con html (xml). codigo raro. (Acá cometí un error en la interpretación del 'coordsize', que sí permite decimales)
Dibujar linea de punto X a un punto Y canvas 
