.range-slider { position: relative; width: calc(100% - 40px); height: 30px; margin: 10px 20px; }

.slider-track { position: absolute; top: 50%; left: 0; width: 100%; height: 8px; background: #e0e0e0; transform: translateY(-50%); border-radius: 4px; }

.slider-range { position: absolute; top: 50%; height: 5px; background: linear-gradient(90deg, #beaa83, #ccbda0); transform: translateY(-50%); border-radius: 4px; }

/* Slider handles */
.slider-handle { position: absolute; top: 50%; width: 20px; height: 20px; background: #fff; border: 2px solid #c5c5c5; border-radius: 50%; cursor: pointer; transform: translate(-50%, -50%); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); touch-action: none; z-index: 2; }
.slider-handle::after { content: attr(val); position: absolute; font-weight: bold; border-radius: 2px; width: max-content; transform: translate(-50%, -110%); font-size: 12px;  font-optical-sizing: auto; font-variant-numeric: lining-nums; }

@media only screen and (max-width: 800px) {
  .range-slider{ width: 100%; margin: 10px 10px; }
  .slider-handle.handle-max::after{ transform: translate(-70%, -150%); }
  .slider-handle.handle-min::after{ transform: translate(-30%, -150%); }
}