From 3b1fc095c4b13be8dd88d9445fe3a64b4017df7d Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Wed, 15 Oct 2025 19:15:14 +0200
Subject: [PATCH] feat: add 50% visual indicators to zap split sliders with
 gradient background and tick marks

---
 src/components/Settings/ZapSettings.tsx | 12 ++++++++++++
 src/styles/components/settings.css      |  9 ++++++++-
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/components/Settings/ZapSettings.tsx b/src/components/Settings/ZapSettings.tsx
index 7e86a3d1..04a578d1 100644
--- a/src/components/Settings/ZapSettings.tsx
+++ b/src/components/Settings/ZapSettings.tsx
@@ -90,7 +90,11 @@ const ZapSettings: React.FC<ZapSettingsProps> = ({ settings, onUpdate }) => {
             value={highlighterWeight}
             onChange={(e) => onUpdate({ zapSplitHighlighterWeight: parseInt(e.target.value) })}
             className="zap-split-slider"
+            list="highlighter-ticks"
           />
+          <datalist id="highlighter-ticks">
+            <option value="50" label="50%"></option>
+          </datalist>
         </div>
       </div>
 
@@ -108,7 +112,11 @@ const ZapSettings: React.FC<ZapSettingsProps> = ({ settings, onUpdate }) => {
             value={authorWeight}
             onChange={(e) => onUpdate({ zapSplitAuthorWeight: parseInt(e.target.value) })}
             className="zap-split-slider"
+            list="author-ticks"
           />
+          <datalist id="author-ticks">
+            <option value="50" label="50%"></option>
+          </datalist>
         </div>
       </div>
 
@@ -127,7 +135,11 @@ const ZapSettings: React.FC<ZapSettingsProps> = ({ settings, onUpdate }) => {
             value={borisWeight}
             onChange={(e) => onUpdate({ zapSplitBorisWeight: parseFloat(e.target.value) })}
             className="zap-split-slider"
+            list="boris-ticks"
           />
+          <datalist id="boris-ticks">
+            <option value="5" label="5"></option>
+          </datalist>
         </div>
       </div>
 
diff --git a/src/styles/components/settings.css b/src/styles/components/settings.css
index 059bd44b..f0d2960d 100644
--- a/src/styles/components/settings.css
+++ b/src/styles/components/settings.css
@@ -54,9 +54,16 @@
   width: 100%;
   height: 8px;
   border-radius: 4px;
-  background: var(--color-bg-elevated);
+  background: linear-gradient(
+    to right,
+    var(--color-primary) 0%,
+    var(--color-primary) 50%,
+    var(--color-bg-elevated) 50%,
+    var(--color-bg-elevated) 100%
+  );
   outline: none;
   -webkit-appearance: none;
+  position: relative;
 }
 .zap-split-slider::-webkit-slider-thumb {
   -webkit-appearance: none;