From a347c31fb75237175217d4e3ddc0c84614382f1e Mon Sep 17 00:00:00 2001
From: lolabird <octavia@octavianichols.com>
Date: Sun, 12 Nov 2023 21:08:19 -0700
Subject: [PATCH] Style slider

---
 index.html |  2 +-
 script.js  |  4 ++++
 style.css  | 44 +++++++++++++++++++++++++++++++++++++++++---
 3 files changed, 46 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index 63b3668..73f67b2 100644
--- a/index.html
+++ b/index.html
@@ -37,7 +37,7 @@
         <div class="grid-input">
             <h3 class="tool-labels">Grid Tools</h3>
             <label class="sub-labels" for="canvas-trans">Canvas Transparency: <span id="trans-label"></span></label>
-            <input name="canvas-trans" id="canvas-trans" type="range" min="0" max="1" step=".1" value="1">
+            <input class="range-slider" name="canvas-trans" id="canvas-trans" type="range" min="0" max="1" step=".1" value="1">
             <div class="grid-tools">
                 <div class="slider">
                     <label class="sub-labels" for="gridSlider">Grid Size: <span id="sliderLabel"></span></label>
diff --git a/script.js b/script.js
index 7ef57d3..bec4815 100644
--- a/script.js
+++ b/script.js
@@ -57,6 +57,7 @@ function resetGrid() {
     colorValue = "black";
     rangeKnob.style.transform = `rotate(${gridSlider.value}deg)`;
     transSlider.value = 1;
+    //transSlider.style.backgroundColor = "rgb(180, 254, 235)";
     transLabel.textContent = transSlider.value
 
     getGridDimensions();
@@ -160,8 +161,10 @@ 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})`;
     } else {
         container.style.backgroundColor = backColorPicker.value;
+        //transSlider.style.backgroundColor = backColorPicker.value;
     }
 }
 
@@ -195,6 +198,7 @@ function adjustTransparency() {
 
     transLabel.textContent = a;
     container.style.backgroundColor = `rgba(${r},${g},${b},${a})`;
+    //transSlider.style.backgroundColor = `rgba(${r},${g},${b},${a})`;
 }
 
 function colorGrid() {
diff --git a/style.css b/style.css
index f19027d..f90e328 100644
--- a/style.css
+++ b/style.css
@@ -45,7 +45,7 @@ footer {
     flex: 0 0 auto; 
 }
 
-button, .container, .color-input, .knob-shadow {
+button, .container, .color-input, .knob-shadow, .range-slider {
     box-shadow: 1px 2px 10px 1px #555;
 }
 
@@ -134,6 +134,45 @@ button {
     font-size: 18px;
 }
 
+.range-slider {
+    appearance: none;
+    width: 100%;
+    height: 12px;
+    background: rgb(180, 254, 235);
+    border-radius: 6px;
+}
+
+input[type="range"]::-moz-range-thumb {
+    appearance: none;
+    width: 20px;
+    height: 20px;
+    background: #f0fbf8;
+    cursor: pointer;
+    box-shadow: 1px 2px 10px 1px #555;
+}
+input[type="range"]::-moz-range-thumb:hover {
+    background-color: #68ffd8;
+}
+input[type="range"]::-moz-range-thumb:active{
+    background-color: #017070;
+}
+
+
+input[type="range"]::-webkit-slider-thumb {
+    appearance: none;
+    width: 20px;
+    height: 20px;
+    background: #f0fbf8;
+    cursor: pointer;
+    box-shadow: 1px 2px 10px 1px #555;
+}
+input[type="range"]::-webkit-slider-thumb:hover {
+    background-color: #68ffd8;
+}
+input[type="range"]::-webkit-slider-thumb:active{
+    background-color: #017070;
+}
+
 #gridSlider {
     display: none;
 }
@@ -177,8 +216,7 @@ button {
 }
 
 .knobless-grid-tools {
-    display: flex;
-    flex-direction: column;
+    display: block;
 }
 
 .grid-buttons {