VLC like volume control with ajax slider

I needed a volume control for my site, so I immediately thought of the Ajax slider and easily set up the control. But then I noticed, it looked too much like a timeline and came up with the idea of a VLC like control, where a bar fills up to the selected volume.

After some experiments, I finally managed to get it working, so here is how it works. The idea is to underlay the track and handle of the slider with a volume bar, that is increased and decreased via javascript on slide (on change). For the volume bar beeing visible through the track, the background of the track is set transparent. The handle will not be visible, so you can click everywhere on the track to set the volume, but you are still able to drag it once you clicked in the track.

This is how it looks like in two different states.

Here is the HTML/PHP code for the view and the needed CSS and Javascript. I only tested it with Firefox 2.00.12, Opera 9.25 and IE7.

HTML:

<div id="volume_control">
  <div id="vol_track">
    <div id="vol_handle"></div>
  </div>
  <div id="vol_bar"></div>
</div>

<?php echo $ajax->slider('vol_handle',
                         'vol_track',
                         array('range' => '$R(0, 100)',
                               'sliderValue' => 50,
                               'increment' => 1,
                               'onChange' => 'function(vol){setVolume(vol)}',
                               'onSlide' => 'function(vol){setVolume(vol)}'
                              )); ?>

CSS:

div#volume_control {
  width: 50px;
  height: 16px;
  position: relative;
  background-color: #cccccc;
}

div#vol_handle {
  width: 0px;
  height: 16px;
  cursor: pointer;
}

div#vol_track {
  width: 50px;
  height: 16px;
  position: absolute;
  border: 1px inset #fff;
  background-color: transparent;
  cursor: pointer;
  z-index: 2;
}

div#vol_bar {
  width: 25px;
  height: 16px;
  position: absolute;
  background-color: #1743A7;
  z-index: 1;
}

Javascript:

function setVolume(vol) {
  $('vol_bar').style.width = Math.round(vol/2) + 'px';
}