.range-slider-wrapper { padding-top: 10px; padding-bottom: 10px;} .range-slider { position: absolute; width: 100%; height: 6px; top: 50%; transform: translateY(-50%); border-radius: 3px; background: transparent; pointer-events: none; -webkit-appearance: none; appearance: none; padding: 0;} .range-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: 50%; background: white; border: 2px solid #333; cursor: pointer; pointer-events: auto; box-shadow: 0 2px 4px rgba(0,0,0,0.2); margin-top: -9px;} .range-slider::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: white; border: 2px solid #333; cursor: pointer; pointer-events: auto; box-shadow: 0 2px 4px rgba(0,0,0,0.2); margin-top: -9px;} .range-slider::-webkit-slider-runnable-track { background: transparent; height: 6px; border-radius: 3px;} .range-slider::-moz-range-track { background: transparent; height: 6px; border-radius: 3px;} .range-slider-wrapper::before { content: ''; position: absolute; width: 100%; height: 3px; background: #000; top: 50%; transform: translateY(-50%); border-radius: 2px; z-index: 0; pointer-events: none;}