Wie verwende ich CSS & HTML um einen Style wie diesen zu erstellen? Volume Ctrl bar?

Question

Volume Ctrl bar

ich auf diesem kleinen Knopf und schieben klicken.

Answer 1

Dies kann für Sie arbeiten. HTML-

<audio controls> 
<source src="http://live96.917xfm.de/;stream" type="audio/mp3"> 
</audio> 

<source src="http://techslides.com/demos/sample-videos/small.webm" type="video/webm"> 
<div class="volume" title="Set volume"> 

CSS-

/* VOLUME BAR CSS */ 

/* volume bar */ 
.volume { 
position:relative; 
cursor:pointer; 
width:100%; 
height:20px; 
float:left; 
margin-top:10px; 
margin-right:10px; 
background-color:#000; 
} 
.volumeBar { 
display:block; 
height:20px; 
position:absolute; 
top:0; 
left:0; 
background-color:#888; 
z-index:10; 
width: 90%; 
} 
.volume3 { 
width: 0; 
height: 0; 
border-style: solid; 
border-width: 0 0 50px 100px; 
border-color: transparent transparent #007bff transparent; 
line-height: 0px; 
_border-color: #000000 #000000 #007bff #000000; 
_filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000'); 
} 

JS-

var audio = document.getElementsByTagName('audio')[0]; 


$('.muted').click(function() { 
audio.muted = !audio.muted; 
return false; 
}); 

//VOLUME BAR 
//volume bar event 
var volumeDrag = false; 
$('.volume').on('mousedown', function (e) { 
volumeDrag = true; 
audio.muted = false; 
$('.sound').removeClass('muted'); 
updateVolume(e.pageX); 
}); 
$(document).on('mouseup', function (e) { 
if (volumeDrag) { 
    volumeDrag = false; 
    updateVolume(e.pageX); 
} 
}); 
$(document).on('mousemove', function (e) { 
if (volumeDrag) { 
    updateVolume(e.pageX); 
} 
}); 
var updateVolume = function (x, vol) { 
var volume = $('.volume'); 
var percentage; 
//if only volume have specificed 
//then direct update volume 
if (vol) { 
    percentage = vol * 100; 
} else { 
    var position = x - volume.offset().left; 
    percentage = 100 * position/volume.width(); 
} 

if (percentage > 100) { 
    percentage = 100; 
} 
if (percentage < 0) { 
    percentage = 0; 
} 

//update volume bar and video volume 
$('.volumeBar').css('width', percentage + '%'); 
audio.volume = percentage/100; 

//change sound icon based on volume 
if (audio.volume == 0) { 
    $('.sound').removeClass('sound2').addClass('muted'); 
} else if (audio.volume > 0.5) { 
    $('.sound').removeClass('muted').addClass('sound2'); 
} else { 
    $('.sound').removeClass('muted').removeClass('sound2'); 
} 

}; 

Dieser Kerl hat bereits eine Arbeits Geige hier fiddle

Answer 2

Sie input:range <input type='range' value='46'>

siehe auch Schieber bei CodePen von Ana Tudor können
http://codepen.io/search/pens?q=slider&limit=thebabydino