Audio element default controls sliders

Question

I'm trying to use an element Audio into my app.

When i put my audio element like that:

<audio controls>
      <source src="http://dl.dropbox.com/u/1538714/article_resources/song.m4a" type="audio/mpeg">
</audio>

Audio element works fine, but when i try to use sliders for control volume/select a time song i can't drag the silders of default control, i only can click in the slider.

i want the default behaviour: http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_audio_all

What i am doing wrong?

Answer 1

This code will help your access the sliders,

    <a class="lazyImage" href="jsImgSlider/images/image-slider-3.jpg">Slide 3</a>
    <audio preload="none" data-image="jsImgSlider/images/image-slider-5.jpg"
        data-alt="Lorem ipsum dolor sit amet" controls>
        <source data-src="prod/mcaudio.mp3" type="audio/mpeg">
        <source data-src="prod/mcaudio.ogg" type="audio/ogg">
    </audio>
</div>
<!--thumbnails-->
<div id="thumbs" data-autovideo="true">
    <div class="thumb">
        <img src="jsImgSlider/images/thumb1.jpg" /><div class="playvideo"></div>
    </div>
    <div class="thumb">
        <img src="jsImgSlider/images/thumb3.jpg" />
    </div>
    <div class="thumb">
        <img src="jsImgSlider/images/thumb5.jpg" /><div class="playvideo"></div>
    </div>
</div>