Überarbeiteter Titel: So wenden Sie den Überlaufeffekt nur auf Box Shadow an
P粉391677921
2023-09-03 17:14:49
<p>Ich versuche, einen Schieberegler für den Eingabebereich zu erstellen, stoße jedoch auf ein Problem. </p>
<p>
<pre class="brush:css;toolbar:false;">body {
rechtfertigen-Inhalt: Mitte;
align-items: center;
Mindesthöhe: 100 Vh;
Hintergrund: #151515;
}
#rangeValue {
Position: relativ;
Bildschirmsperre;
Schriftgröße: 6em;
Farbe: #999;
Schriftstärke: 400;
}
.Reichweite {
Hintergrund: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab) !important;
Breite: 400px;
Höhe: 5px;
-webkit-Erscheinungsbild: keine;
Hintergrund: #111;
Gliederung: keine;
Randradius: 15px;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 1);
}
.range::-webkit-slider-thumb {
-webkit-Erscheinungsbild: keine;
Breite: 15px;
Höhe: 15px;
Randradius: 50 %;
Hintergrund: blau;
Cursor: Zeiger;
Box-Shadow: -507px 0 0 500px rot;
}</pre>
<pre class="brush:html;toolbar:false;"><div>
<span id="rangeValue">0</span>
<Input class="range" type="range" name "" value="0" min="0" max="1000"></Input>
</div></pre>
</p>
<p>Das Problem ist: Ich möchte, dass dieser große rote Bereich beim Zeichnen innerhalb des Eingabeschiebereglers bleibt. Die einzige Lösung besteht darin, <code>overflow:hidden</code> auf <code>.range</code> anzuwenden, aber ich verliere die blaue Punktschaltfläche.
Gibt es eine Möglichkeit, <code>overflow:hidden</code> einfach auf <code>box-shadow</code> anzuwenden? Oder irgendwelche Hinweise auf andere Möglichkeiten, es zum Laufen zu bringen? </p>
<p>Das Endergebnis sollte so aussehen =></p>
<p><img src="/uploads/20230822/169264211664e3ab441b49a.png" alt=" Endergebnis " /></p>
<p>Vielen Dank. </p>
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
我不确定这是否有帮助，但这是我进行的重构。也许你可以做一些修改以适应你的任务。
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Slider</title> </head> <body> <div> <span id="rangeValue">0</span> <Input type="range" name="" id="range" value="0" min="0" max="100"></Input> </div> </body> <script src=""></script> </html>CSS
body { justify-content: center; align-items: center; min-height: 100vh; background: #151515; } #rangeValue { position: relative; display: block; font-size: 6em; color: #999; font-weight: 400; } /* Input Thumb */ input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; height: 20px; width: 20px; border-radius: 50%; background: #ff4500; cursor: ew-resize; box-shadow: 0 0 2px 0 #555; transition: background .3s ease-in-out; } input[type="range"]::-moz-range-thumb { -webkit-appearance: none; height: 20px; width: 20px; border-radius: 50%; background: #ff4500; cursor: ew-resize; box-shadow: 0 0 2px 0 #555; transition: background .3s ease-in-out; } input[type="range"]::-ms-thumb { -webkit-appearance: none; height: 20px; width: 20px; border-radius: 50%; background: #ff4500; cursor: ew-resize; box-shadow: 0 0 2px 0 #555; transition: background .3s ease-in-out; } /* Input Track */ input[type=range]::-webkit-slider-runnable-track { -webkit-appearance: none; box-shadow: none; border: none; background: transparent; } input[type=range]::-moz-range-track { -webkit-appearance: none; box-shadow: none; border: none; background: transparent; }JS
const rangeInputs = document.querySelectorAll('input[type="range"]') function handleInputChange(e) { let target = e.target if (e.target.type !== 'range') { target = document.getElementById('range') } const min = target.min const max = target.max const val = target.value target.style.backgroundSize = (val - min) * 100 / (max - min) + '% 100%' } rangeInputs.forEach(input => { input.addEventListener('input', handleInputChange) })你可以根据自己的喜好进行调整。 希望这有所帮助。