diff --git a/firmware/data/style.css b/firmware/data/style.css
index caa7f53..1b7d199 100644
--- a/firmware/data/style.css
+++ b/firmware/data/style.css
@@ -63,4 +63,37 @@ background-color: #4CAF50;
 }
 .toast.error {
 background-color: #f44336;
+}
+input[type=range] {
+-webkit-appearance: none;
+width: 70%;
+height: 7px;
+margin: 4px 0;
+background-color: #ddd;
+}
+input[type=range]:focus {
+outline: none;
+}
+input[type=range]::-webkit-slider-thumb {
+-webkit-appearance: none;
+appearance: none;
+width: 15px;
+height: 15px;
+border-radius: 10%;
+background-color: #a1a1a1;
+cursor: pointer;
+}
+input[type=range]::-moz-range-thumb {
+width: 15px;
+height: 15px;
+border-radius: 10%;
+background-color: #a1a1a1;
+cursor: pointer;
+}
+input[type=range]::-ms-thumb {
+width: 15px;
+height: 15px;
+border-radius: 10%;
+background-color: #a1a1a1;
+cursor: pointer;
 }
\ No newline at end of file
diff --git a/firmware/html/style.css b/firmware/html/style.css
index caa7f53..1b7d199 100644
--- a/firmware/html/style.css
+++ b/firmware/html/style.css
@@ -63,4 +63,37 @@ background-color: #4CAF50;
 }
 .toast.error {
 background-color: #f44336;
+}
+input[type=range] {
+-webkit-appearance: none;
+width: 70%;
+height: 7px;
+margin: 4px 0;
+background-color: #ddd;
+}
+input[type=range]:focus {
+outline: none;
+}
+input[type=range]::-webkit-slider-thumb {
+-webkit-appearance: none;
+appearance: none;
+width: 15px;
+height: 15px;
+border-radius: 10%;
+background-color: #a1a1a1;
+cursor: pointer;
+}
+input[type=range]::-moz-range-thumb {
+width: 15px;
+height: 15px;
+border-radius: 10%;
+background-color: #a1a1a1;
+cursor: pointer;
+}
+input[type=range]::-ms-thumb {
+width: 15px;
+height: 15px;
+border-radius: 10%;
+background-color: #a1a1a1;
+cursor: pointer;
 }
\ No newline at end of file