Mit einem Range Slider kann man alle möglichen CSS-Commands, welche eine numerische Skala haben, beeinflussen. In dieser Anleitung wird erklärt, wie man einen solchen Range-Slider einsetzen kann.
Der Range Slider in einer seiner Einsatzmöglichkeiten
Mit Range Slidern kann man alle CSS-Commands beeinflussen, die eine numerische Skala haben.
Was beudeutet das?
Manche CSS-Commands arbeiten mit alphabetischen Commands und manche arbeiten mit numerischen Skalen.
color: blue; ist ein alphabetischer Command, da blue nicht aus Zahlen, sondern aus Buchstaben besteht.
Verwenden wir jedoch beispielsweise margin-left: 200;, so ist das ein numerischer Command, da wir mit der Zahl 200 arbeiten können.
Zuerst fügen wir den folgenden Code in die Page-Settings vor dem </body> Tag ein:
Dieser Code ist die Basis für unseren Range Slider.
Um ihn jedoch nutzen zu können, müssen wir ein paar Begriffe im Code verstehen.
Das Input Feld wird durch ein Custom Code Element erstellt. Darin wird folgender Code geschrieben:
Nun brauchen wir noch das Element, welches wir mit dem Range Slider beinflussen möchten.
Als Beispiel können wir hier ein Bild nehmen, bei dem wir mit dem Range Slider das Bild horizontal hin und her bewegen wollen.
Wir fügen in diesem Schritt also einfach ein Bild in unsere Webseite ein.
Um den Basis Code funktional zu machen, müssen wir nun einerseits dem Slider, als auch dem Bild eine ID geben.
Nun müssen wir dem Basis Code noch mitteilen, wie unser Slider und unser Bild heisst.
Dafür gehen wir in unseren Basis Code und ändern folgende Dinge:
