/* ═══════════════════════════════════════════════════════════
Free Bounce — Neumorphic Slider Design System
Single source of truth for all slider styling site-wide.
Usage:
Themes (set on or any ancestor):
default — silver/blue (main site brand)
data-slider="blue" — deep blue (all tools)
═══════════════════════════════════════════════════════════ */
/* --- Theme tokens --- */
:root {
--sl-knob-a: #94a3b8;
--sl-knob-b: #cbd5e1;
--sl-knob-c: #38bdf8;
--sl-glow: 56,189,248;
--sl-fill-a: #64748b;
--sl-fill-b: #94a3b8;
--sl-fill-c: #38bdf8;
}
[data-slider="blue"] {
--sl-knob-a: #1e40af;
--sl-knob-b: #3b82f6;
--sl-knob-c: #60a5fa;
--sl-glow: 59,130,246;
--sl-fill-a: #1e40af;
--sl-fill-b: #3b82f6;
--sl-fill-c: #60a5fa;
}
/* --- Base --- */
input[type=range] {
-webkit-appearance: none; appearance: none;
background: transparent; width: 100%; height: 36px;
cursor: pointer; position: relative;
}
/* --- Track (recessed groove) --- */
input[type=range]::-webkit-slider-runnable-track {
width: 100%; height: 8px; cursor: pointer;
background: #1e1e22;
border-radius: 6px;
border: 1px solid rgba(0,0,0,0.4);
box-shadow:
inset 0 2px 4px rgba(0,0,0,0.5),
inset 0 1px 2px rgba(0,0,0,0.3),
0 1px 0 rgba(255,255,255,0.04);
}
/* --- Knob (metallic raised) --- */
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none;
height: 22px; width: 22px;
border-radius: 50%;
cursor: pointer;
margin-top: -8px;
border: 2px solid rgba(255,255,255,0.12);
background:
radial-gradient(ellipse at 35% 25%, rgba(255,255,255,0.3) 0%, transparent 55%),
linear-gradient(160deg, var(--sl-knob-a) 0%, var(--sl-knob-b) 40%, var(--sl-knob-c) 100%);
box-shadow:
0 2px 8px rgba(var(--sl-glow),0.4),
0 4px 12px rgba(0,0,0,0.4),
inset 0 1px 0 rgba(255,255,255,0.25);
transition: box-shadow 0.2s, transform 0.15s;
}
input[type=range]::-webkit-slider-thumb:hover {
transform: scale(1.12);
box-shadow:
0 2px 12px rgba(var(--sl-glow),0.6),
0 6px 16px rgba(0,0,0,0.5),
inset 0 1px 0 rgba(255,255,255,0.3);
}
input[type=range]::-webkit-slider-thumb:active {
transform: scale(1.05);
box-shadow:
0 1px 6px rgba(var(--sl-glow),0.5),
0 2px 8px rgba(0,0,0,0.4),
inset 0 1px 0 rgba(255,255,255,0.15);
}
/* --- Firefox Track --- */
input[type=range]::-moz-range-track {
width: 100%; height: 8px; cursor: pointer;
background: #1e1e22;
border-radius: 6px;
border: 1px solid rgba(0,0,0,0.4);
box-shadow: inset 0 2px 4px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.04);
}
/* --- Firefox Knob --- */
input[type=range]::-moz-range-thumb {
height: 20px; width: 20px;
border-radius: 50%; cursor: pointer;
border: 2px solid rgba(255,255,255,0.12);
background:
radial-gradient(ellipse at 35% 25%, rgba(255,255,255,0.3) 0%, transparent 55%),
linear-gradient(160deg, var(--sl-knob-a) 0%, var(--sl-knob-b) 40%, var(--sl-knob-c) 100%);
box-shadow:
0 2px 8px rgba(var(--sl-glow),0.4),
0 4px 12px rgba(0,0,0,0.4),
inset 0 1px 0 rgba(255,255,255,0.25);
}
/* --- Firefox filled portion --- */
input[type=range]::-moz-range-progress {
height: 8px; border-radius: 6px 0 0 6px;
background: linear-gradient(90deg, var(--sl-fill-a), var(--sl-fill-b), var(--sl-fill-c));
box-shadow: inset 0 1px 2px rgba(255,255,255,0.08);
}
/* --- Focus ring --- */
input[type=range]:focus { outline: none; }
input[type=range]:focus::-webkit-slider-thumb {
box-shadow:
0 0 0 3px rgba(var(--sl-glow),0.25),
0 2px 8px rgba(var(--sl-glow),0.4),
0 4px 12px rgba(0,0,0,0.4);
}