slider.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 560 280" width="560" height="280">
  <rect width="560" height="280" fill="#000"/>

  <!-- slider: fill×fix(3g). track g/4=2px tall. handle 2g=16px circle. fill = emotion color -->

  <!-- ═══ ROW 1: RANGE + EMOTION ═══ -->
  <text x="280" y="24" font-family="Play, sans-serif" font-size="14" fill="#555" text-anchor="middle">range — emotion by value</text>

  <!-- 3 sliders × 160 + 2 × 24 = 528. offset = (560-528)/2 = 16 -->

  <!-- healthy (green, ~70%) -->
  <g transform="translate(16, 48)">
    <rect x="0" y="10" width="160" height="2" rx="1" fill="#333"/>
    <rect x="0" y="10" width="112" height="2" rx="1" fill="#00fe00"/>
    <circle cx="112" cy="11" r="8" fill="#00fe00"/>
    <text x="80" y="40" font-family="Play, sans-serif" font-size="10" fill="#00fe00" text-anchor="middle">healthy</text>
  </g>

  <!-- caution (yellow, ~45%) -->
  <g transform="translate(200, 48)">
    <rect x="0" y="10" width="160" height="2" rx="1" fill="#333"/>
    <rect x="0" y="10" width="72" height="2" rx="1" fill="#fcf000"/>
    <circle cx="72" cy="11" r="8" fill="#fcf000"/>
    <text x="80" y="40" font-family="Play, sans-serif" font-size="10" fill="#fcf000" text-anchor="middle">caution</text>
  </g>

  <!-- danger (red, ~15%) -->
  <g transform="translate(384, 48)">
    <rect x="0" y="10" width="160" height="2" rx="1" fill="#333"/>
    <rect x="0" y="10" width="24" height="2" rx="1" fill="#ff0000"/>
    <circle cx="24" cy="11" r="8" fill="#ff0000"/>
    <text x="80" y="40" font-family="Play, sans-serif" font-size="10" fill="#ff0000" text-anchor="middle">danger</text>
  </g>

  <!-- ═══ ROW 2: PROGRESS (read-only, no handle) ═══ -->
  <rect x="40" y="100" width="480" height="1" fill="#1a1a1a"/>
  <text x="280" y="124" font-family="Play, sans-serif" font-size="14" fill="#555" text-anchor="middle">progress (read-only, no handle)</text>

  <!-- 3 progress bars × 160 + 2 × 24 = 528. offset = 16 -->

  <!-- 80% green -->
  <g transform="translate(16, 144)">
    <rect x="0" y="10" width="160" height="2" rx="1" fill="#333"/>
    <rect x="0" y="10" width="128" height="2" rx="1" fill="#00fe00"/>
    <text x="80" y="32" font-family="Play, sans-serif" font-size="10" fill="#00fe00" text-anchor="middle">80%</text>
  </g>

  <!-- 35% yellow -->
  <g transform="translate(200, 144)">
    <rect x="0" y="10" width="160" height="2" rx="1" fill="#333"/>
    <rect x="0" y="10" width="56" height="2" rx="1" fill="#fcf000"/>
    <text x="80" y="32" font-family="Play, sans-serif" font-size="10" fill="#fcf000" text-anchor="middle">35%</text>
  </g>

  <!-- 10% red -->
  <g transform="translate(384, 144)">
    <rect x="0" y="10" width="160" height="2" rx="1" fill="#333"/>
    <rect x="0" y="10" width="16" height="2" rx="1" fill="#ff0000"/>
    <text x="80" y="32" font-family="Play, sans-serif" font-size="10" fill="#ff0000" text-anchor="middle">10%</text>
  </g>

  <!-- ═══ ROW 3: STATES ═══ -->
  <rect x="40" y="180" width="480" height="1" fill="#1a1a1a"/>
  <text x="280" y="204" font-family="Play, sans-serif" font-size="14" fill="#555" text-anchor="middle">states</text>

  <!-- 3 states × 160 + 2 × 24 = 528. offset = 16 -->

  <!-- hover: handle 1.2× -->
  <g transform="translate(16, 224)">
    <rect x="0" y="10" width="160" height="2" rx="1" fill="#333"/>
    <rect x="0" y="10" width="96" height="2" rx="1" fill="#00fe00"/>
    <circle cx="96" cy="11" r="10" fill="#00fe00"/>
    <text x="80" y="44" font-family="Play, sans-serif" font-size="10" fill="#555" text-anchor="middle">hover (1.2×)</text>
  </g>

  <!-- dragging: handle follows -->
  <g transform="translate(200, 224)">
    <rect x="0" y="10" width="160" height="2" rx="1" fill="#333"/>
    <rect x="0" y="10" width="120" height="2" rx="1" fill="#00fe00"/>
    <circle cx="120" cy="11" r="8" fill="#00fe00" stroke="#fff" stroke-width="1"/>
    <text x="80" y="44" font-family="Play, sans-serif" font-size="10" fill="#555" text-anchor="middle">dragging</text>
  </g>

  <!-- disabled -->
  <g transform="translate(384, 224)">
    <rect x="0" y="10" width="160" height="2" rx="1" fill="#333"/>
    <rect x="0" y="10" width="64" height="2" rx="1" fill="#4b4b4d"/>
    <circle cx="64" cy="11" r="8" fill="#4b4b4d"/>
    <text x="80" y="44" font-family="Play, sans-serif" font-size="10" fill="#555" text-anchor="middle">disabled</text>
  </g>

</svg>
prysm/svg/molecules/slider.svg

Graph
