From c72dddabdd70bbf86348276a09dccf9d3881b9e3 Mon Sep 17 00:00:00 2001
From: lolabird <octavia@octavianichols.com>
Date: Sun, 12 Nov 2023 22:12:11 -0700
Subject: [PATCH] Style range slider

---
 script.js |  8 ++++++++
 style.css | 14 +++++++++++---
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/script.js b/script.js
index bec4815..29e7bab 100644
--- a/script.js
+++ b/script.js
@@ -14,6 +14,12 @@ const transLabel = document.querySelector("#trans-label");
 const transSlider = document.querySelector("#canvas-trans");
 const reset = document.querySelector("#reset");
 
+const rangeSlider = document.querySelector('input[type="range"]');
+rangeSlider.addEventListener('input', function() {
+    const percentage = ((rangeSlider.value - rangeSlider.min) / (rangeSlider.max - rangeSlider.min)) * 100;
+    rangeSlider.style.setProperty('--range-value', `${percentage}%`);
+});
+
 
 //the next few variables are set to be used to test if
 //a given button has been clicked
@@ -36,8 +42,10 @@ buttons.forEach((button) => {
 colorPicker.addEventListener("input", changeColor);
 colorPicker.addEventListener("change", changeColor);
 backColorPicker.addEventListener("input", pickBackground);
+
 transSlider.addEventListener("input", adjustTransparency);
 
+
 gridSlider.addEventListener("input", getGridDimensions);
 rangeKnob.addEventListener("mousedown", (e) => {
     document.addEventListener("mousemove", rotateKnob);
diff --git a/style.css b/style.css
index f90e328..e68f0b6 100644
--- a/style.css
+++ b/style.css
@@ -1,5 +1,6 @@
 html {
     height: 100%;
+    --range-value: 100%;
 }
 
 body{
@@ -140,6 +141,7 @@ button {
     height: 12px;
     background: rgb(180, 254, 235);
     border-radius: 6px;
+    margin-bottom: 20px;
 }
 
 input[type="range"]::-moz-range-thumb {
@@ -154,7 +156,10 @@ input[type="range"]::-moz-range-thumb:hover {
     background-color: #68ffd8;
 }
 input[type="range"]::-moz-range-thumb:active{
-    background-color: #017070;
+    background-color: #68ffd8;
+}
+input[type="range"]::-moz-range-track {
+    background: linear-gradient(to right, #FF0000 0%, #FF0000 var(--range-value), #00FF00 var(--range-value), #00FF00 100%);
 }
 
 
@@ -169,8 +174,11 @@ input[type="range"]::-webkit-slider-thumb {
 input[type="range"]::-webkit-slider-thumb:hover {
     background-color: #68ffd8;
 }
-input[type="range"]::-webkit-slider-thumb:active{
-    background-color: #017070;
+input[type="range"]::-webkit-slider-thumb:active {
+    background-color: #68ffd8;
+}
+input[type="range"]::-webkit-slider-runnable-track {
+    background: linear-gradient(to right, #FF0000 0%, #FF0000 var(--range-value), #00FF00 var(--range-value), #00FF00 100%);
 }
 
 #gridSlider {