Mediola: Erstellen eines CSS-Sliders mit Farbverlauf

In einem meiner letzten Berichte habe ich euch bereits über die im Mediola Creator NEO enthaltenen Statusregeln für Textobjekte berichtet. Aufgrund einiger Nachfragen habe ich euch in diesem Bericht noch das Erstellen eines Sliders mit Farbverlauf über sogenannte Cascading Style Sheets zusammengefasst.

Wie ihr eventuell bereits wisst, gibt es beim Mediola Creator NEO die Möglichkeit Slider-Elemente zu verwenden. Diese werden typischerweise zum Ansteuern von Rollläden oder auch Dimmern verwendet, so dass über das Slider-Bedienelement der Behang bzw. die Helligkeit eingestellt werden kann.

In diesem Bericht möchte ich euch zeigen, wie ihr einen individuellen Slider mit Farbverlauf erstellt, welcher euch bspw. den Status des Dutycycles darstellt.

Wir verwenden hierfür die sogenannten Cascading Style Sheets, welche generell für bspw. Formatierungs- und Stildefinitionen in HTML-Seiten verwendet werden. Sie können beispielsweise Schriftarten, Farben oder auch Linien enthalten. Man verwendet Cascading Style Sheets typischerweise, um Inhalt sowie Stil bzw. Aussehen eines HTML-Dokuments sauber voneinander zu trennen. Des Weiteren ergeben sich mit CSS deutlich mehr Möglichkeiten zur Gestaltung bzw. zum Design einer Homepage.

Vorgehen

Erstellt euch eine neue Fernbedienung mit dem Mediola Creator NEO oder öffnet eure bereits bestehende Fernbedienung. Nun zieht euch ein Slider-Element in die Oberfläche:

Klickt nun auf der rechten Seite in die Eigenschaften des Sliders und wählt Stil aus.

Hier habt ihr nun die Möglichkeit, zwischen einem vorgegebenen Grafikdesign oder aber auch einem eigenen CSS-Design zu wählen:

Wählt CSS aus und wechselt in das Dropdown-Menü. Hier findet ihr die einzelnen Bereiche des Slider-Elements:

Wählt zunächst Behälter aus, da es sich hierbei um den generellen Hintergrund des Sliders handelt. Hier wird nun der CSS-Code für einen Farbverlauf eingetragen. Diesen könnt ihr bspw. ganz hervorragend über die Website https://cssgradient.io selbst erstellen. Herzlichen Dank an dieser Stelle auch nochmal an den Betreiber/Programmierer.

In meinem Fall habe ich einen Farbverlauf von Blau über Orange hin bis Rot erstellt. Den dazugehörigen CSS-Code könnt ihr nun ebenfalls direkt auf der genannten Website finden:

Kopiert diesen in die Zwischenablage und tragt den CSS-Code in das Code-Feld im Mediola Neo Creator ein. Sofort wird euer erzeugter Farbverlauf als Hintergrund angezeigt:

Um nun noch die weißen Schiebeflächen des Sliders zu löschen, klickt ihr euch durch das Dropdown-Menü durch und löscht den CSS-Code bei den folgenden Punkten:

Hintergrund links
Hintergrund rechts
Ende links
Ende rechts

Über die Felder Layout und Knopf könnt ihr noch den Stil des Zeigers verändern.

Damit erhaltet ihr bspw. folgendes Slider-Design… Ich habe den Radius des Knopfes auf 0 gesetzt, um einen strichförmigen Zeiger zu erhalten:

Wir speichern das Slider-Element mit Übernehmen und legen jetzt einen Status auf das Objekt:

Wählt nun eine beliebige Variable oder auch einen Gerätewert aus, der eine Zahl annehmen kann (bspw. Dutycycle oder Dimmerwert).

Jetzt könnt ihr in dem Eigenschaften-Feld (rechte Seite im Creator) noch festlegen, ob das Element bedienbar sein soll (nur nötig, wenn ihr eine Aktion auf dem Slider habt) und wie hoch die Minimal- sowie Maximalwerte des Sliders sind (Standard: 0 – 100).