Reduzierung von externen Quellen: Bootstrap Slider

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 …


… beziehungsweise Bright-Mode.

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“

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.

Good point!

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

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:

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:

PS: Aktueller Stand am Branch :wink:

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

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.

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:

Ich hab jetzt mal wieder dev rein gemerged und alle Konflikte resolved. Das ist in Visual Code leider echt ein ziemlicher Krampf, drum hoff ich auch, dass es nichts zerschossen hat von @CaCO3’s Änderungen. Abgesehen von einigen Autoformatting-Dingen die vielleicht auf der Strecke geblieben sind sollte das auch hoffentlich gelungen sein :crossed_fingers:

Hier ein Pull-Request, damit ich das nicht so bald wieder machen muss :dizzy_face:

PS: Der PR hat auch den Branch von Frühsommerputz in der `management.html` mit dabei, weil ich davon geforkt hatte…

Hi @trainbird, Danke für Deine ganze Arbeit!

Leider sind da jetzt die Anpassungen der Weboberfläche wie Slider/Upload-Fortschritt mit den dynamisch anpassbaren Defines (Einstellungen zur Laufzeit) vermischt. Und letzteres ist ja noch nicht fertig. Wird jetzt schwierig es so zu übernehmen. Können wir die Anpassungen Slider/Upload der management.html noch trennen? Oder seht Ihr einen besseren Weg?

Die alternative wäre, dev in den Frühsommerputz Branch zu mergen und den mal auf dev zu bringen.
Es war halt null response dort und das mergen bei Konflikten is monströs unsexy und unübersichtlich auf vscode, drum wollt ich das reduzieren. Oder gibts da vielleicht eine Möglichkeit, wie man ihm beibringt nicht 200 Zeilen lange code Blöcke als Vergleichsraum zu nehmen? Weil da sind dann natürlich maximal viele mini Änderungen überall drin :woozy_face:

Und ich hab damals den slider aus dem Frühsommerputz Branch geforkt, weil der viele breaking changes hat, ich mir den merge sparen wollte und ich dachte, der geht eh schnell durch…

@trainbird ich würde es jetzt so machen (Wäre aus meiner Sicht der geringste Aufwand)):

Du erstellst einen neuen frischen Branch „Fruehlingsputz“ vom aktuellen DEV-Zweig.
Deine geputzte management.html + Sprachdateien reinkopieren & die Box mit den dynamischen Einstellungen/Defines zunächst noch rauslassen. Dann einen neuen PR erstellen. Dort sieht man dann auch schön die Änderungen unter „Files changed

Für die korrekte Formatierung (clang) kann man in der entsprechenden Datei Alles markieren & Strg+Umsch+F drücken. Aber an clang soll es nicht scheitern, das können wir notfalls korrigieren.

Wenn der PR dann von mir oder @biologist übernommen wurde kopierst Du die management.html mit den dynamischen Einstellungen in Deinen DEV-Zweig wieder rein & Du bist wieder aktuell. Damit wären „Frühlingsputz“ und die dynamischen Einstellungen sauber getrennt…