Range Slider Komponente

Stellen Sie interaktive Slider z.B. als Preisrechner zur Verfügung.

---

Wer in den letzten Monaten hin und wieder unsere Website aufgesucht hat, weiß, dass mich das React CMS Scrivito total begeistert. Das liegt zum Einen an den einfachen, aber vielfältigen Möglichkeiten, die Scrivito Endbenutzern zur Erstellung von Websites bietet und zum Anderen an der Tatsache, dass Scrivito mir die Freude an der Programmierung zurückgebracht hat.

Entwickler können alles mit einer Sprache erledigen: Javascript und ReactJS. Das Scrivito SDK wurde sehr überlegt und klar entworfen. Nur dadurch ist es mir möglich gewesen sehr schnell eigene Widgets zu entwickeln. Angefangen, mit sehr einfachen Widgets, die lediglich Textelemente rendern, bis hin zu interaktiven Widget, wie meinen Chart-Widgets.

React-Komponenten als Basis

Auf Github und/oder NPM stehen unzählige fertige React-Komponenten zur Verfügung. Das nützt einem normalen Website-Betreiber, ohne Programmier-Kenntnissen, aber herzlich wenig. Auch in Scrivito kann so eine Komponente, von einem Endbenutzer, nicht einfach so benutzt werden. Damit die Komponente im Scrivito-UI zu Verfügung steht und von jedem editierbar ist, muss ein Entwickler diese Komponente in einem Scrivito-Widget implementieren. Dies habe ich in den letzten Monaten gerne und oft gemacht. Mein neuestes Widget implementiert eine React Range-Slider Komponente. Nun ist es bei vielen React-Komponenten so, dass diese zwar ein UI-Element rendern, aber noch nichts sinnvolles damit tun. So auch React Range-Slider Komponenten. Hier ein Beispiel. Der Range-Slider lässt sich zwischen frei konfigurierbaren Start- und Endwerten bewegen und zeigt den aktuellen Wert an. Mehr nicht. Das Label, auf der linken Seite, ist schon eine Erweiterung von mir. Aber Slider sind ja kein Selbstzweck, sondern müssen irgendetwas sinnvolles tun.

Umrechnungs-Rechner

Ich habe aus dem Range-Slider einen frei konfigurierbaren Umrechnungs-Rechner gemacht. Der Rechner weiß nicht was er berechnen soll. Voraussetzung ist lediglich, dass ein Wert auf der Skala mit einem festgelegten Faktor multiplziert wird. Sie als Endbenutzer legen fest für welche Art Berechnung Sie dieses Widget konfigurieren möchten. Dazu editieren Sie das Widget und legen Start- und Endwert, den Faktor und eine Einheit z.B. € fest. Fertig ist Ihr Rechner. Solche interaktiven Elemente sind bei Besuchern sehr beliebt und können zu einer längeren Verweildauer und häufigeren Besuchen auf Ihrer Website dienen. Nachfolgend drei Beispiele. Wie Sie sehen, können mit dem gleichen Widget, komplett unterschiedliche Berechnungen durchgeführt werden.