Hallo alle zusammen,
ich probiere mich am basteln eines Sliders für meine Lamellenpositionen/Rollladenposition.
Den Slider für die Rollladenposition der eine Range von 0% - 100% besitzt funktioniert so weit. D.h. das der Slider sich je nach Stellung der Kugel mit der Farbe Grün füllt.
Der CSS-Code dafür sieht wie folgt aus:
Jetzt habe ich einige Variationsmöglichkeiten im CSS-Code für die Lamellenposition ausprobiert, kenne mich jedoch leider nicht gut genug mit dieser Sprache aus und weiß nicht welche alternativen Codes es für meinen Anwendungsfall existieren.
Beim Lamellenposition-Slider ist die Range von -3 -bis 3. Daraus resultiert wie im Bild zu sehen, dass die Neutrale Stellung der Lamellen die 0 ist (mittig). Folglich dessen soll von der Mitte des Sliders aus, sich der Sliderbalken mit der Farbe Grün jeweils nach oben und unten füllen.
Was müsste jetzt am obrigen Code ändern/hinzugefügt damit dies so zu realisieren ist?
Ich hoffe mir kann jemand dabei helfen?
Gruß Lex
ich probiere mich am basteln eines Sliders für meine Lamellenpositionen/Rollladenposition.
Den Slider für die Rollladenposition der eine Range von 0% - 100% besitzt funktioniert so weit. D.h. das der Slider sich je nach Stellung der Kugel mit der Farbe Grün füllt.
Der CSS-Code dafür sieht wie folgt aus:
Code:
background-image: -webkit-linear-gradient(top, #02FF9A 0%, #02FF9A {#/100*104}%, rgba(255,255,255,0.1) {#/100*104}%, rgba(255,255,255,0.1) 100%);
Beim Lamellenposition-Slider ist die Range von -3 -bis 3. Daraus resultiert wie im Bild zu sehen, dass die Neutrale Stellung der Lamellen die 0 ist (mittig). Folglich dessen soll von der Mitte des Sliders aus, sich der Sliderbalken mit der Farbe Grün jeweils nach oben und unten füllen.
Was müsste jetzt am obrigen Code ändern/hinzugefügt damit dies so zu realisieren ist?
Ich hoffe mir kann jemand dabei helfen?
Gruß Lex