main.js: se añade el codigo al slider que arroja la posicion. index.h…

…tml: se agrega id al slider. slider.css: se cambia el margen en el eje y

css/slider.css

@@ -1,8 +1,8 @@
 #slider {
-  width: 200px;
+  width: 150px;
   height: 17px;
   position: relative;
-  margin: 100px auto;
+  margin: 20px auto;
   background: #10171D;
   -webkit-border-radius: 40px;
   -moz-border-radius: 40px;
@@ -12,7 +12,7 @@
   box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13);
 }
 #slider .bar {
-  width: 200px;
+  width: 150px;
   height: 5px;
   background: #333;
   position: relative;

index.html

@@ -22,7 +22,7 @@ <h1 class="display-5 my-1">Yun Control</h1>
 	        </div>
 	        <div class="input-group my-1">
 	        	<!-- <span></span> -->
-		        <input type="range" min=0 max=255 value=125>
+		        <input id="slider" type="range" min=0 max=255 value=125>
 	        </div>
 	      </div>
 	    </div>

js/main.js

@@ -14,6 +14,11 @@ $(document).ready(function(){
 		});
 	});
 
+	$('#slider').mouseup(function(){
+		var value = $(this).val();
+		console.log(value);
+	});
+
 	// $.get(url1, function (response){
 	// 	var statusHTML = '<ul class = "bulleted">';
 	// 	$.each(response, function (index, employee){