diff --git a/code/html/custom.css b/code/html/custom.css
index 4ba70588..356eb8f9 100644
--- a/code/html/custom.css
+++ b/code/html/custom.css
@@ -151,7 +151,7 @@ div.state {
 }
 
 .slider {
-    margin-top: 12px;
+    margin-top: 10px;
 }
 .slider .noUi-target {
     background: #D2D2D2;
@@ -159,3 +159,9 @@ div.state {
 .slider .noUi-connect {
 	background: #FFFFFF;
 }
+.slider .noUi-tooltip {
+    font-size: 10px;
+    border: 0px;
+    padding: 0px;
+    margin-bottom: -4px;
+}
diff --git a/code/html/custom.js b/code/html/custom.js
index 3f117f4f..6c6263d2 100644
--- a/code/html/custom.js
+++ b/code/html/custom.js
@@ -301,6 +301,11 @@ function initColor() {
     noUiSlider.create($("#brightness").get(0), {
 		start: 255,
 		connect: [true, false],
+        tooltips: true,
+        format: {
+            to: function (value) { return parseInt(value); },
+            from: function (value) { return value; }
+        },
 		orientation: "horizontal",
 		range: { 'min': 0, 'max': 255}
 	}).on("change", function() {
@@ -335,6 +340,11 @@ function initChannels(num) {
         noUiSlider.create($(".slider", line).get(0), {
     		start: 0,
     		connect: [true, false],
+            tooltips: true,
+            format: {
+                to: function (value) { return parseInt(value); },
+                from: function (value) { return value; }
+            },
     		orientation: "horizontal",
     		range: { 'min': 0, 'max': 255 }
     	}).on("change", function() {