/* Rangeslider Base */ .rangeslider, .rangeslider__fill { background: #e6e6e6; display: block; height: 12px; width: 100%; border-radius: 10px; } .rangeslider { position: relative; } .rangeslider--disabled { opacity: 0.4; } /* Fill (active colored part) */ .rangeslider__fill { position: absolute; top: 0; height: 100%; background: #B1FC03; /* Farbe für den aktiven Bereich */ border-radius: 10px; background-clip: padding-box; } /* Handle (Kreis zum Ziehen) */ .rangeslider__handle { color: black; height: 22px; width: 22px; border: 0; top: -5px; border-radius: 11px; background-color: #fff; cursor: pointer; display: inline-block; position: absolute; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.44), inset 0 1px 0 #fff; background-image: linear-gradient(to top, #fff 0%, #fff 100%); background-clip: padding-box; } /* Preis-Label über dem Handle */ .rangeslider__handle::before { color: black; width: 60px; display: block; content: attr(data-content); position: relative; top: -30px; left: -20px; padding: 2px 4px; min-width: 30px; border-radius: 10px; line-height: 20px; text-align: center; background-color: #B1FC03; font-size: 12px; font-weight: bold; white-space: nowrap; } /* Fokus-Stil */ input[type="range"]:focus + .rangeslider .rangeslider__handle { box-shadow: 0 0 8px rgba(177, 252, 3, 0.9); } /* Wrapper (zentriert den Slider ggf.) */ .wrapper-rangeslider { width: 100%; margin: 50px auto 0; } /* Skala unterhalb des Sliders */ #ruler { position: relative; height: 20px; } #ruler span { position: absolute; width: 10px; top: 10px; color: #f6f6f6; font-size: 10px; text-shadow: 0 1px 0 #9e2d04; } /* Positionierung der Skalenpunkte */ #ruler span:nth-child(1) { left: 0%; } #ruler span:nth-child(2) { left: 11%; } #ruler span:nth-child(3) { left: 22%; } #ruler span:nth-child(4) { left: 33%; } #ruler span:nth-child(5) { left: 44%; } #ruler span:nth-child(6) { left: 55%; } #ruler span:nth-child(7) { left: 66%; } #ruler span:nth-child(8) { left: 77%; } #ruler span:nth-child(9) { left: 88%; } #ruler span:nth-child(10) { left: 95%; } #monthly-custom, #yearly-custom { transition: font-weight 0.5s; font-weight: 400; } .is-active { font-weight: 600; }
Discover the different LeadMetrics packages, find the ideal one for your needs, and start leveraging the power of our robust software immediately.
inkl. 30-Tage-Geld-zurück-Garantie*
.avif)