Slider Track

<!-- Slider Track — set --pos (0–100) for the thumb position -->
<div class="nuda-tslide" style="--pos: 65">
  <span class="nuda-tslide__icon nuda-tslide__icon--sun" aria-hidden="true">☀</span>
  <div class="nuda-tslide__track">
    <span class="nuda-tslide__fill"></span>
    <span class="nuda-tslide__thumb"></span>
  </div>
  <span class="nuda-tslide__icon nuda-tslide__icon--moon" aria-hidden="true">☾</span>
</div>

/* Slider Track
   Sun → moon slider that doubles as a "warmth/contrast" control.
   Customize: --pos (current position 0–100), --slide-warm, --slide-cool */

.nuda-tslide {
  --pos: 50;
  --slide-warm: #fbbf24;
  --slide-cool: #e4ff54;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 999px;
}

.nuda-tslide__icon {
  font-size: 0.875rem;
  width: 16px;
  text-align: center;
  transition: opacity 0.25s, transform 0.25s;
}

.nuda-tslide__icon--sun  { color: var(--slide-warm); }
.nuda-tslide__icon--moon {
  color: var(--slide-cool);
  filter: drop-shadow(0 0 4px rgba(228, 255, 84, 0.4));
}

.nuda-tslide__track {
  position: relative;
  width: 70px;
  height: 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 3px;
  cursor: pointer;
}

.nuda-tslide__fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: calc(var(--pos) * 1%);
  background: linear-gradient(90deg, var(--slide-warm), var(--slide-cool));
  border-radius: 3px;
  animation: nuda-tslide-fill 1.6s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}

.nuda-tslide__thumb {
  position: absolute;
  left: calc(var(--pos) * 1%);
  top: 50%;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fafafa;
  border: 2px solid var(--slide-cool);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 8px rgba(228, 255, 84, 0.5);
  transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes nuda-tslide-fill { from { width: 0; } }

@media (prefers-reduced-motion: reduce) {
  .nuda-tslide__fill,
  .nuda-tslide__thumb { animation: none; transition: none; }
}