diff --git a/index.html b/index.html
index e719603..6447c0e 100644
--- a/index.html
+++ b/index.html
@@ -35,7 +35,7 @@ <h1>Audio Player</h1>
 				</div>
 
 				<div class="song-length-div">
-					<input type="range" class="song-length" min="0" max="" value="0" onchange="songTimeChange(this.value)">
+					<input type="range" class="song-length" min="0" max="100" value="0" onchange="songTimeChange(this.value)">
 				</div>
 
 				<div class="audio-div">
diff --git a/scripts.js b/scripts.js
index 4e9665f..0e1de1b 100644
--- a/scripts.js
+++ b/scripts.js
@@ -180,8 +180,12 @@ function timeUpdate() {
 	timeConverter();
 
 	currTimeDiv.textContent = songTime;
+
+	progressBar.value = Math.round((songTime / songMaxTime) * 100);
 }
 
+
+
 window.onload = function() {
 
 	songMaxTime = Math.round(audio.duration);
diff --git a/style.css b/style.css
index 46a1a45..b7ac3c7 100644
--- a/style.css
+++ b/style.css
@@ -182,7 +182,7 @@ input[type="range"]::-webkit-slider-thumb {
 	background-repeat: no-repeat;
 	background-position: top;
 	background-size: contain;
-	opacity:  0.4;
+	opacity:  0.3;
 	z-index: 10;
 }
 
@@ -218,7 +218,7 @@ input[type="range"]::-webkit-slider-thumb {
 	background-repeat: no-repeat;
 	background-position: top;
 	background-size: contain;
-	opacity:  0.4;
+	opacity:  0.3;
 	z-index: 10;
 }
 
@@ -233,7 +233,7 @@ input[type="range"]::-webkit-slider-thumb {
 	background-repeat: no-repeat;
 	background-position: top;
 	background-size: contain;
-	opacity:  0.4;
+	opacity:  0.3;
 	z-index: 10;
 }