volume slider html

Solutions on MaxInterview for volume slider html by the best coders in the world

showing results for - "volume slider html"
18 May 2019
1<html>
2  <body>
3  	<h1>Volume slider</h1>
4	<div id="player">
5		<i class="fa fa-volume-down"></i>
6		<div id="volume"></div>
7		<i class="fa fa-volume-up"></i>
8	</div>
9    
10    <style>
11    	@import url(https://fonts.googleapis.com/css?family=Raleway:500);
12
13$primary-color: #2ecc71;
14
15body {
16	background: #2a2a2a;
17	font-family: Raleway;
18}
19	
20h1 {
21	text-align: center;
22	font-size: 34px;
23	padding-top: 40px;
24	color: #FFF;
25}
26	
27p {
28	color: #999;
29	text-align: center;
30	font-size: 15px;
31	
32	a {
33		color: $primary-color;
34		text-decoration: none;
35		padding: 1px 2px 0px 2px;
36		border-bottom: 2px solid rgba(0, 0, 0, .0);
37		transition: all .1s ease;
38		
39		&:hover {
40			padding: 1px 2px 1px 2px;
41			border-bottom: 2px solid #555;
42		}
43	}
44}
45
46#player {
47	width: 350px;
48	height: 50px;
49	position: relative;
50	margin: 0 auto;
51	top: 80px;
52	
53	i {
54		position: absolute;
55		margin-top: -6px;
56		color: #666;
57	}
58	
59	i.fa-volume-down {
60		margin-left: -8px;
61	}
62	
63	i.fa-volume-up {
64		margin-right: -8px;
65		right: 0;
66	}
67}
68
69#volume {
70	position: absolute;
71	left: 24px;
72	margin: 0 auto;
73	height: 5px;
74	width: 300px;
75	background: #555;
76	border-radius: 15px;
77	
78	.ui-slider-range-min {
79		height: 5px;
80		width: 300px;
81		position: absolute;
82		background: $primary-color;
83		border: none;
84		border-radius: 10px;
85  	outline: none;
86	}
87	
88	.ui-slider-handle {
89		width: 20px;
90  	height: 20px;
91		border-radius: 20px;
92  	background: #FFF;
93  	position: absolute;
94  	margin-left: -8px;
95  	margin-top: -8px;
96  	cursor: pointer;
97  	outline: none;
98	}
99}
100    </style>
101    
102    <script>
103      $("#volume").slider({
104  	min: 0,
105  	max: 100,
106  	value: 0,
107		range: "min",
108  	slide: function(event, ui) {
109    	setVolume(ui.value / 100);
110  	}
111	});
112	
113	var myMedia = document.createElement('audio');
114	$('#player').append(myMedia);
115	myMedia.id = "myMedia";
116
117	playAudio('http://emilcarlsson.se/assets/Avicii%20-%20The%20Nights.mp3', 0);
118	
119	function playAudio(fileName, myVolume) {
120			myMedia.src = fileName;
121			myMedia.setAttribute('loop', 'loop');
122    	setVolume(myVolume);
123    	myMedia.play();
124	}
125	
126	function setVolume(myVolume) {
127    var myMedia = document.getElementById('myMedia');
128    myMedia.volume = myVolume;
129	}
130    </script>
131    
132  </body>
133</html>