bugged passive powder sliders

sq2bs.css

@@ -128,6 +128,46 @@
 
 .aDam:before, .Air:before, .Air_powder:before { content: "\274b" ' '; }
 
+.e_slider, .t_slider, .w_slider, .f_slider, .a_slider {
+    -webkit-appearance: none;
+    background: #AAAAAA;
+    border-radius: 30px;
+    height: 0.5rem;
+}
+
+/***** Chrome, Safari, Opera, and Edge Chromium *****/
+.e_slider::-webkit-slider-runnable-track, .t_slider::-webkit-slider-runnable-track, .w_slider::-webkit-slider-runnable-track, .f_slider::-webkit-slider-runnable-track, .a_slider::-webkit-slider-runnable-track {
+    -webkit-appeareance: none;
+    background:transparent;
+    height: 0.5rem;
+}
+
+ 
+/******** Firefox **** **/
+.e_slider::-moz-range-track, .t_slider::-moz-range-track, .w_slider::-moz-range-track, .f_slider::-moz-range-track, .a_slider::-moz-range-track {
+    -webkit-appearance: none;
+    background-color: transparent;
+    border-radius: 30px;
+    height: 0.5rem;
+}
+
+
+.e_slider::-webkit-slider-thumb, .t_slider::-webkit-slider-thumb, .w_slider::-webkit-slider-thumb, .f_slider::-webkit-slider-thumb, .a_slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    height: 0.75rem;
+    width: 0.75rem;
+    border-radius: 0.375rem;
+    margin-top: -0.125rem;
+    background-color: #FFFFFF;
+    border: solid 2px #82CFD0;
+}
+
+input[type=range]:focus {
+    outline: none; /* Removes the border. */
+}
+
+
 .nDam, .Neutral {
     color: #FFAA00;
 }

sq2bs.html

@@ -491,7 +491,7 @@
                                                     Rage (Passive)
                                                 </div>
                                                 <div class="col">
-                                                    <input type = "range" id = "str_boost_armor" name = "str-boost-armor" min = '0' max = '396' value = '0' step = '1' onchange = "updateArmorPowderSpecials('dex_boost_armor')">
+                                                    <input type = "range" class = "e_slider" id = "str_boost_armor" name = "str-boost-armor" min = '0' max = '396' value = '0' step = '1' onchange = "updateArmorPowderSpecials('str_boost_armor')">
                                                     <label id = "str_boost_armor_label" for="str-boost-armor">% Earth Dmg Boost: 0</label>
                                                 </div>
                                             </div>
@@ -534,7 +534,7 @@
                                                     Kill Streak (Passive)
                                                 </div>
                                                 <div class="col">
-                                                    <input type = "range" id = "dex_boost_armor" name = "dex-boost-armor" min = '0' max = '200' value = '0' step = '1' onchange = "updateArmorPowderSpecials('dex_boost_armor')">
+                                                    <input type = "range" class = "t_slider" id = "dex_boost_armor" name = "dex-boost-armor" min = '0' max = '200' value = '0' step = '1' onchange = "updateArmorPowderSpecials('dex_boost_armor')">
                                                     <label id = "dex_boost_armor_label" for="dex-boost-armor">% Thunder Dmg Boost: 0</label>
                                                 </div>
                                             </div>
@@ -577,7 +577,7 @@
                                                     Concentration (Passive)
                                                 </div>
                                                 <div class="col">
-                                                    <input type = "range" id = "int_boost_armor" name = "dex-boost-armor" min = '0' max = '150' value = '0' step = '1' onchange = "updateArmorPowderSpecials('int_boost_armor')">
+                                                    <input type = "range" class = "w_slider" id = "int_boost_armor" name = "dex-boost-armor" min = '0' max = '150' value = '0' step = '1' onchange = "updateArmorPowderSpecials('int_boost_armor')">
                                                     <label id = "int_boost_armor_label" for="dex-boost-armor">% Water Dmg Boost: 0</label>
                                                 </div>
                                             </div>
@@ -620,7 +620,7 @@
                                                     Endurance (Passive)
                                                 </div>
                                                 <div class="col">
-                                                    <input type = "range" id = "def_boost_armor" name = "def-boost-armor" min = '0' max = '200' value = '0' step = '1' onchange = "updateArmorPowderSpecials('def_boost_armor')">
+                                                    <input type = "range" class = "f_slider" id = "def_boost_armor" name = "def-boost-armor" min = '0' max = '200' value = '0' step = '1' onchange = "updateArmorPowderSpecials('def_boost_armor')">
                                                     <label id = "def_boost_armor_label" for="def-boost-armor">% Fire Dmg Boost: 0</label>
                                                 </div>
                                             </div>
@@ -663,7 +663,7 @@
                                                     Dodge (Passive)
                                                 </div>
                                                 <div class="col">
-                                                    <input type = "range" id = "agi_boost_armor" name = "agi-boost-armor" min = '0' max = '150' value = '0' step = '1' onchange = "updateArmorPowderSpecials('agi_boost_armor')">
+                                                    <input type = "range" class = "a_slider" id = "agi_boost_armor" name = "agi-boost-armor" min = '0' max = '150' value = '0' step = '1' onchange = "updateArmorPowderSpecials('agi_boost_armor')">
                                                     <label id = "agi_boost_armor_label" for="agi-boost-armor">% Air Dmg Boost: 0</label>
                                                 </div>
                                             </div>

sq2builder.js

@@ -655,19 +655,26 @@ function updateArmorPowderSpecials(elem_id) {
     let elem = document.getElementById(elem_id);
     let value = elem.value;
 
+
+    let label = document.getElementById(elem_id + "_label");
+    label.textContent = label.textContent.split(":")[0] + ": " + value;
+    
+    if (player_build) {
         let dmg_id = elem_chars[skp_names.indexOf(wynn_elem)] + "DamPct"; 
         let new_dmgboost = player_build.externalStats.get(dmg_id) + (value - armor_powder_boosts[skp_names.indexOf(wynn_elem)]);
         armor_powder_boosts[skp_names.indexOf(wynn_elem)] = value;
-
-    let label = document.getElementById(elem_id + "_label");
-    label.textContent = label.textContent.split(":")[0] + ": " + elem.value;
-    
         //update build stats
         player_build.externalStats.set(dmg_id, new_dmgboost);
     
         //calc build stats and display powder special
         calculateBuildStats();
         // displaysq2PowderSpecials(document.getElementById("powder-special-stats"), powderSpecials, player_build, true); 
+    }
+
+    //update the slider's graphics
+    let bg_color = elem_colors[skp_names.indexOf(wynn_elem)];
+    let pct = Math.round(100 * value / powderSpecialStats[skp_names.indexOf(wynn_elem)].cap);
+    elem.setAttribute("style.background",`linear-gradient(to right, ${bg_color}, ${bg_color} ${pct}%, #AAAAAA ${pct}%, #AAAAAA ${100 - pct}%)`);
 }
 
 /* Calculates all build statistics and updates the entire display.

sq2display_constants.js

@@ -30,6 +30,14 @@ let elem_chars = [
     'a'
 ]
 
+let elem_colors = [
+    "#00AA00",
+    "FFFF55",
+    "55FFFF",
+    "FF5555",
+    "FFFFFF"
+]
+
 /*
  * Display commands
  */