    :root{
      --track-height:10px;
      --track-color:#ddd;
      --range-color:#4aa3ff;
      --thumb-size:18px;
      --thumb-color:#fff;
      --thumb-border:#4aa3ff;
    }

    .slider-container{ width:100%; max-width:640px; margin:32px auto; }
    .labels{ display:flex; justify-content:space-between; margin-bottom:12px; font-size:14px; }
    .range-wrap{ position:relative; height:var(--thumb-size); user-select:none; touch-action:none; }
    .track{ position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); height:var(--track-height); background:var(--track-color); border-radius:999px; }
    .range-highlight{ position:absolute; top:50%; transform:translateY(-50%); height:var(--track-height); background:var(--range-color); border-radius:999px; }

    input[type=range]{ -webkit-appearance:none; appearance:none; position:absolute; left:0; right:0; top:0; width:100%; height:100%; background:transparent; pointer-events:none; }
    input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; pointer-events:auto; width:var(--thumb-size); height:var(--thumb-size); border-radius:50%; background:var(--thumb-color); border:2px solid var(--thumb-border); box-shadow:0 1px 3px rgba(0,0,0,0.15); cursor:pointer; margin-top: calc((var(--track-height) - var(--thumb-size)) / 2); }
    input[type=range]::-moz-range-thumb{ pointer-events:auto; width:var(--thumb-size); height:var(--thumb-size); border-radius:50%; background:var(--thumb-color); border:2px solid var(--thumb-border); box-shadow:0 1px 3px rgba(0,0,0,0.15); cursor:pointer; }
    input[type=range]::-moz-range-track{ background:transparent; border:0; }

    @media (max-width:520px){ .values{ flex-direction:column; align-items:flex-start; } .readable{ min-width:unset; width:100%; } }