Reduzierung von externen Quellen: Bootstrap Slider

Software
1

Hallo aus der Sommerpause :slight_smile:

Ich hab mich mal dran gesetzt und die externe Library Bootstrap Slider (die ja für Bootstrap v4 entwickelt wurde) ersetzt durch die Range Elemente aus Bootstrap v5.

Das sieht dann so aus für Dark-Mode …

image
image953×356 13.2 KB

… beziehungsweise Bright-Mode.
image
image952×283 9.04 KB

Es sind jetzt mal alle Slider ersetzt, bisher gibt es aber keine Tooltips, weil das nicht eingebaut ist ab Haus.
Die Frage ist: Wollen wir die Tooltips haben? Dann muss ich mir das anschauen :wink:

Das ganze lebt unter dem Branch slider-range, der von html-cleanup (siehe Frühsommerputz in der `management.html`) abzweigt.

2 „Gefällt mir“
2

Ja, schon. Weil man stellt ja auch z.B. Spannungen ein. Da muss man schon wissen, ob das jetzt z.B. 3,1 oder 3,4 Volt sind.

3

Good point!

Dann mach ich mich an eine Lösung, die auch die Einheit mit denkt (Volt, dB, …)

4

Leider ist es (mir) mit überschaubarem Aufwand nur möglich, das Tooltip auf den Input zu setzen, statt auf den Handle …

Hintergrund

Der Handle ist ein Pseudo-Element, der per jQuery nicht greifbar ist. Und ich will nicht den ganzen Code von Bootstrap durchforsten, wie sie das im Hintergrund machen um es zu kopieren :smirk:

Das sieht dann on hover so aus:

image
image991×267 9.48 KB

Dafür kann aber jetzt über das data-toggle-mask-Attribut gesteuert werden, ob der Text irgendwie formatiert werden soll. Es wird relativ stumpf das % durch den value ersetzt:

<input type="range" class="form-range" min="-6" max="6" id="gainLowPass" name="gainLowPass" data-bs-toggle="tooltip" data-toggle-mask="%dB" required>

Sieht dann so aus:

image
image957×420 12.8 KB

PS: Aktueller Stand am Branch :wink:

5

Ich schaue mir das die Tage mal an. Danke für deine Arbeit.

6

Ich hatte mir damals bei der Migration auf Bootstrap 5 auch die Zähne am Slider ausgebissen. Offenbar geht der Tooltip wirklich nur mit dem alten externen Bootstrap Slider, deshalb hatten wir das ja mal so belassen.

Eine Möglichkeit wäre, dass wir die Tooltips weglassen und stattdessen auf der Seite den Wert fix anzeigen. Das hätte auch den Vorteil, dass man ihn immer sehen kann.
Oder man könne den aktuellen Wert jeweils in der Bezeichnung des Sliders in Klammern anzeigen.

7

Ja, der ist schon ein ziemlicher fiesling, der slider…
Ich hab auch schon überlegt, ob man ihn irgendwie ins Label mitnimmt, den wert oder in der Zeile des Labels aber rechtsbündig … So richtig schlau bin ich aber noch nicht geworden, das sieht alles eher sehr provisorisch aus :confused: