Slider mit Bargraph

[mfd]

Mach‘s doch anders herum: nach den gradienten für rot und grün und das grau ist nicht da, weil transparent. So hatte ich es verstanden, gemeint und selbst im Einsatz (allerdings einfarbig, nicht zweifarbig).

Genau so hatte ich es schon angedacht. Die zweite (rote Farbe) ist jetzt mal nebensächlich.
Wie muss der Gradient oder die Gradienten aussehen, damit ich "transparente" Balken bekomme? Das klappt nach deinem obigen Beispiel ja nicht so einfach. Oder habe ich da was übersehen?

vento66 ein dynamische Design kann ich nicht verwenden, da ich sonst keine Live-Vorschau habe, deshalb auch der Wunsch danach an anderer Stelle...

Edit: ich glaube jetzt verstehe ich wie saegefisch meint

[mfd]

Derzeit sieht der Teil so aus

-webkit-repeating-linear-gradient(bottom,
rgba(0,0,0,0) 0px,
rgba(0,0,0,0) 4px,
rgba(0,0,0,1) 4px,
rgba(0,0,0,1) 8px),

Nur wie muss der aussehen, dass ich mein KO da jetzt einbaue und es weiterhin ein repeating-linear-gradient bleibt?

[saegefisch]

Wenn Du einen steigenen "Aussteurungs-Balken" haben möchtest und dabei auch "angebrochene" Striche akzeptierst, dann Skaliere die Höhe über das KO, bei 0 ist die Höhe null, bei 80 ist die Höhe z.B. 160px. Für den roten Bereich machst Du das gleiche, aber die Höhe ist Null bis KO=80 und erreicht die Maximalhähe bei KO=100. Das sollte mit Deinem CSS-Style funktionieren.

Mit CSS wirst Du schon technisch nie nur vollständige LED schaffen. Naja, vielleicht mit einem Trick, wenn du statt px mit % arbeitest und geschickt die % an den KO-Wert hängst, der KO-Wert nur definierte Stufen annehmen kann und parallel die Höhe skalierst. Dann hast Du auch mit CSS immer vollständige Farbmarken/"LED".

Wenn Du immer anders diskret und vollständieg "LED" haben möchtest, dann wirst Du wohl für 20 "LED" nicht um 20 UE herumkommen, die nur entweder sichtbar oder unsichtbar sind abhängig vom KO-Wert.

[mfd]

Den Aussteuerungsbalken an sich habe ich so gelöst, dass ich immer 5%-Schritte, also eine "Austeuerungs-LED" mehr oder weniger bekomme:

-webkit-linear-gradient(bottom,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) 80%,
#ff6140 80%,
#ff6140 {round(#/5)*(5)}%,
rgba(0,0,0,0) {round(#/5)*(5)}%,
rgba(0,0,0,0) 100%),

-webkit-linear-gradient(bottom,
#00ffe6 0%,
#00ffe6 {round(#/5)*(5)}%,
rgba(0,255,0,0) {round(#/5)*(5)}%,
rgba(0,255,0,0) 100%)

Nur wie bekomme ich jetzt "Unterbrechungen" rein, die transparent sind? Bisher liegt einfach der repeating-linear-gradient (aus Beitrag 62) darüber und unterbricht meine Linie immer mit 4px Höhe.

Allgemein formuliert: kann ich einen repating-linear-gradient per (CSS-) KO so steuern, dass er in der Höhe veränderlich ist?

20 einzelne UE sind leider keine Option, da sonst keine Live-Vorschau funktioniert. Das sieht dann als Slider ziemlich doof aus (schon getestet), wenn die Anzeige hinterher hinkt.

[MrIcemanLE]

Du könntest doch auch mit {round(#/5)*(5)} die Länge deines UEs ändern und diesem UE eine "LED" mit transparentem Rahmen als Hintergrund-Bild geben und dieses Wiederholen lassen. Dann sieht man immer nur die errechnete Anzahl an "LEDs"

Edit:
Oder so: https://codepen.io/mricemanle/pen/eoeqrb

.innerbox {
  height: 75%;
  width: 100%;
  background-image: repeating-linear-gradient(0deg,
      transparent 0 2px,
      #ff6140 2px 8px,
      transparent 8px 10px);
}

Nachteil. Du müsstest die Breite deines Gradienten an deine Teilung und die Gesamthöhe deines UE anpassen (10px = 5% * 200px)

Edit2: Habe gerade erst gesehen, dass du am Ende des Pegels eine andere Farbe benötigst. Dann geht das so natürlich nicht. Sorry

[saegefisch]

Ja, so in etwa hätte ich mir das gedacht. Aber dann wird es nur über die synchrone Anpassung der Höhe des UE gehen.
Für 2 Farben aufwändiger, aber auch möglich; technisch identisch.

[mfd]

Da ich mit der CSS-Welt nicht so vertraut bin: wie soll ich obiges Beispiel in EDOMI "übersetzen"?
Wenn ich das richtig verstehe, müsste ich doch Elemente wie innerbox erst definieren, was in EDOMI nicht so einfach möglich ist.

[MrIcemanLE]

wie soll ich obiges Beispiel in EDOMI "übersetzen"?

Innerbox und outerbox entsprechen zwei Universalelemente der Größe 20x200px, welche übereinander liegen. outerbox ist nur für den Rahmen zuständig. innerbox (also das zweite Element) würde in der Höhe deine Formel {round(#/5)*5*2} bekommen und wäre somit bei einem KO-Wert von 82% --> round(82/5)*5*2px = 160px hoch, was 80% von 200px entspricht. Da Edomi "von oben" rechnet, musst du dieses Universalelement noch um {200-round(#/5)*5*2} verschieben (also dy)

Problem an der ganzen Umsetzung ist, dass es relativ statisch an die Größe des Universalelements gebunden ist.

Wenn du round() benutzt, bekommst du ab z.B. 82,5% einen neuen Balken. Wenn du ab 80% einen neuen Balken willst müsstest du immer abrunden (floor()).

Anbei ein paar Screenshots. Nur kurz in der Vorschau getestet.

[mfd]

Danke für die Hinweise, hat soweit geklappt. Ich habe es auch auf meine derzeitige Sliderhöhe mit 156px angepasst.
Auch Slider mit verschiedenen Farbbereichen klappen. Ist mit den ganzen Anpassungen IMHO zwar grenzwertig vom Aufwand, aber was tut man nicht alles für die Optik. Wobei es zunächst noch nicht mal für die "Produktiv-Visu" ist...