diff --git a/client/src/components/Settings/AppearanceSettingsTab.tsx b/client/src/components/Settings/AppearanceSettingsTab.tsx
index 3fb127f5..32608aec 100644
--- a/client/src/components/Settings/AppearanceSettingsTab.tsx
+++ b/client/src/components/Settings/AppearanceSettingsTab.tsx
@@ -457,7 +457,8 @@ function SliderRow({ label, value, onChange }: { label: string; value: number; o
         step={0.05}
         value={value}
         onChange={(e) => onChange(Number(e.target.value))}
-        style={{ width: '100%', accentColor: 'var(--accent)', cursor: 'pointer' }}
+        className="trek-range"
+        style={{ '--fill': `${((value - APPEARANCE_SCALE_MIN) / (APPEARANCE_SCALE_MAX - APPEARANCE_SCALE_MIN)) * 100}%` } as React.CSSProperties}
       />
     </div>
   )
@@ -482,7 +483,8 @@ function SizeRow({ sampleClass, name, example, sample, value, onChange }: { samp
         step={0.05}
         value={value}
         onChange={(e) => onChange(Number(e.target.value))}
-        style={{ width: '100%', accentColor: 'var(--accent)', cursor: 'pointer' }}
+        className="trek-range"
+        style={{ '--fill': `${((value - APPEARANCE_SCALE_MIN) / (APPEARANCE_SCALE_MAX - APPEARANCE_SCALE_MIN)) * 100}%` } as React.CSSProperties}
       />
     </div>
   )
diff --git a/client/src/index.css b/client/src/index.css
index 22566991..7e22da2e 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -1093,3 +1093,36 @@ img[alt="TREK"] {
   .dp-day-header:hover .dp-day-actions,
   .dp-day-header[data-selected="true"] .dp-day-actions { opacity: 1; }
 }
+
+/* ── TREK range slider — thin filled track + soft round thumb ─────────────── */
+.trek-range {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 5px;
+  border-radius: 999px;
+  background: linear-gradient(to right, var(--accent) var(--fill, 50%), var(--border-faint) var(--fill, 50%));
+  outline: none;
+  cursor: pointer;
+}
+.trek-range::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: var(--bg-card, #fff);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
+  transition: transform 0.12s ease;
+}
+.trek-range::-webkit-slider-thumb:hover { transform: scale(1.1); }
+.trek-range::-webkit-slider-thumb:active { transform: scale(1.18); }
+.trek-range::-moz-range-thumb {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: var(--bg-card, #fff);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
+}
+.trek-range::-moz-range-track { height: 5px; border-radius: 999px; background: transparent; }