add volume

Pau1fitz · Nov 27, 2017 · 7ec1960 · 7ec1960
1 parent 9b43233
commit 7ec1960
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 13 deletions.
diff --git a/src/components/VolumeControls/VolumeControls.css b/src/components/VolumeControls/VolumeControls.css
@@ -1,26 +1,35 @@
 .volume-container {
-  position: relative;
-  top: -10px;
+  position: absolute;
+  top: 48px;
+	right: 10px;
 }
 
-.volume {
-    -webkit-appearance: none;
-    width: 100px;
-    height: 5px;
-    background: #4CAF50;
-    border-radius: 4px;
-    outline: none;
-    opacity: 1;
-    -webkit-transition: .2s;
-    transition: opacity .2s;
+.volume,
+input[type=range]::-moz-range-track {
+  -webkit-appearance: none;
+  width: 120px;
+  height: 5px;
+  background: #4CAF50;
+  border-radius: 4px;
+  outline: none;
+  opacity: 1;
+  -webkit-transition: .2s;
+  transition: opacity .2s;
+}
+
+.volume-container .fa-volume-up {
+	position: relative;
+	top: 3px;
+	margin-right: 5px;
 }
 
 .volume:hover {
     opacity: 0.8;
     background: #4CAF50;
 }
 
-.volume::-webkit-slider-thumb {
+.volume::-webkit-slider-thumb,
+.volume::-moz-range-thumb {
     -webkit-appearance: none;
     appearance: none;
     width: 12px;

diff --git a/src/components/VolumeControls/component.js b/src/components/VolumeControls/component.js
@@ -25,6 +25,7 @@ class VolumeControls extends Component {
 
 		return (
 			<div className='volume-container'>
+				<i className="fa fa-volume-up" aria-hidden="true"></i>
 				<input className='volume' type="range" min={0} max={100} value={this.state.volume} onInput={this.updateVolume} />
 			</div>
 		);