Untitled
unknown
html
5 months ago
3.0 kB
5
Indexable
<div class="slider-container"> <div class="slider-track"> <div class="slider-range" style="left: "PORCENTAJE MINIMO"; width:"PORCENTAJE MAXIMO - PORCENTAJE MINIMO";"> </div> </div> <input type="range" min="50000" max="2000000" class="range-input" value="50000"> <input type="range" min="50000" max="2000000" class="range-input" value="2000000"> </div> <style> /* Custom range slider styles */ input[type="range"] { -webkit-appearance: none; appearance: none; background: transparent; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; height: var(--thumb-size); width: var(--thumb-size); border-radius: 50%; background: var(--thumb-color); border: var(--thumb-border); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); cursor: pointer; pointer-events: auto; margin-top: -7px; position: relative; z-index: 1; } input[type="range"]::-moz-range-thumb { height: var(--thumb-size); width: var(--thumb-size); border-radius: 50%; background: var(--thumb-color); border: var(--thumb-border); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); cursor: pointer; pointer-events: auto; position: relative; z-index: 1; } .price-range-container { width: 100%; max-width: 28rem; margin: 0 auto; padding: 1.5rem; } .price-display { margin-bottom: 2rem; } .price-values { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } .price-box { display: flex; align-items: center; gap: 0.5rem; background-color: var(--card-background); border-radius: 0.5rem; padding: 0.75rem; min-width: 140px; box-shadow: var(--shadow-sm); } .price-box .icon { width: 1rem; height: 1rem; color: var(--text-secondary); } .price-box .value { font-weight: 500; color: var(--text-primary); } .price-separator { color: var(--text-secondary); } .slider-container { position: relative; height: 0.5rem; } .slider-track { position: absolute; width: 100%; height: 100%; background-color: #e5e7eb; border-radius: 9999px; } .slider-range { position: absolute; height: 100%; background-color: var(--primary-color); border-radius: 9999px; transition: all 0.2s ease; } .range-input { position: absolute; width: 100%; height: 100%; appearance: none; background: transparent; pointer-events: none; } .range-input::-webkit-slider-thumb { appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #ffffff; border: 2px solid var(--primary-color); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); cursor: pointer; pointer-events: auto; margin-top: -6px; position: relative; z-index: 1; } .range-input::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #ffffff; border: 2px solid var(--primary-color); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); cursor: pointer; pointer-events: auto; position: relative; z-index: 1; } </style>
Editor is loading...
Leave a Comment