Resize-Handle vergrößern

[Rolf B]

Hallo JürgenB,

der Slider ist eine geniale Idee 😀

Dass man mit -moz-webkit-ms-Prefixen um sich werfen muss, ist natürlich ärgerlich.

Der kleine Offset zwischen Slider und Gap kommt bei Dir daher, dass der Slider einen Margin hat, den muss man auf 0 setzen.

gap wird von Safari nur für Grid unterstützt, ist richtig. D.h. man muss für den Safari einen Würgherum bauen. Aber wenn man das tut, kann man den auch für alle Browser verwenden, das spart Mühe.

Ich hätte da einen Alternativvorschlag: Viel CSS, viele custom properties, und das JS tut kaum noch was außer die Höhe des Thumbs auf 100% zu justieren und die Sliderposition in ein Custom Property übertragen. Und es limitiert die minimalen und maximalen Werte des Sliders.

https://jsfiddle.net/Rolf_b/q13dc4es/

Ob man das so hexen kann, dass man eine min-width auf den Panels setzt und das JS sich das daraus ausrechnet, ganz egal welche Einheiten verwendet werden, das hab ich noch nicht raus.

Leider ist es eine Lösung, die auf dem IE zu nicht lesbarer Darstellung der Seite führt, befürchte ich. Wegen der CSS Variablen custom properties. Da muss vermutlich noch irgendwas im Script dazu, dass dann ein festes Breitenverhältnis einstellt.

Rolf