From e84554b8868a7bb13d15b823a6bc6a9e58a442a1 Mon Sep 17 00:00:00 2001
From: lolabird <octavia@octavianichols.com>
Date: Sun, 12 Nov 2023 22:32:22 -0700
Subject: [PATCH] Dynamically change color of slider

---
 script.js | 12 ++++++++----
 style.css |  5 +++--
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/script.js b/script.js
index 29e7bab..b05046c 100644
--- a/script.js
+++ b/script.js
@@ -65,7 +65,8 @@ function resetGrid() {
     colorValue = "black";
     rangeKnob.style.transform = `rotate(${gridSlider.value}deg)`;
     transSlider.value = 1;
-    //transSlider.style.backgroundColor = "rgb(180, 254, 235)";
+    transSlider.style.backgroundColor = "rgb(180, 254, 235)";
+    rangeSlider.style.setProperty('--canvas-color', "rgb(180, 254, 235)");
     transLabel.textContent = transSlider.value
 
     getGridDimensions();
@@ -169,10 +170,12 @@ function pickBackground() {
         b = num2[2];
         a = num[3]+ "."+ num[4];
         container.style.backgroundColor = `rgba(${r},${g},${b},${a})`;
-        //transSlider.style.backgroundColor = `rgba(${r},${g},${b},${a})`;
+        transSlider.style.backgroundColor = `rgba(${r},${g},${b},${a})`;
+        rangeSlider.style.setProperty('--canvas-color', `rgba(${r},${g},${b},${a})`);
     } else {
         container.style.backgroundColor = backColorPicker.value;
-        //transSlider.style.backgroundColor = backColorPicker.value;
+        transSlider.style.backgroundColor = backColorPicker.value;
+        rangeSlider.style.setProperty('--canvas-color', backColorPicker.value);
     }
 }
 
@@ -206,7 +209,8 @@ function adjustTransparency() {
 
     transLabel.textContent = a;
     container.style.backgroundColor = `rgba(${r},${g},${b},${a})`;
-    //transSlider.style.backgroundColor = `rgba(${r},${g},${b},${a})`;
+    transSlider.style.backgroundColor = `rgba(${r},${g},${b},${a})`;
+    rangeSlider.style.setProperty('--canvas-color', `rgba(${r},${g},${b},${a})`);
 }
 
 function colorGrid() {
diff --git a/style.css b/style.css
index e68f0b6..4ff080a 100644
--- a/style.css
+++ b/style.css
@@ -1,6 +1,7 @@
 html {
     height: 100%;
     --range-value: 100%;
+    --canvas-color: rgb(180, 254, 235);
 }
 
 body{
@@ -159,7 +160,7 @@ input[type="range"]::-moz-range-thumb:active{
     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%);
+    background: linear-gradient(to right, var(--canvas-color) 0%, var(--canvas-color) var(--range-value), #bbb var(--range-value), #bbb 100%);
 }
 
 
@@ -178,7 +179,7 @@ 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%);
+    background: linear-gradient(to right, var(--canvas-color) 0%, var(--canvas-color) var(--range-value), #bbb var(--range-value), #bbb 100%);;
 }
 
 #gridSlider {