Powerange und Switchery: HTML5 für Schalter und Slider im Flat Design

Kein Beitragsbild

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren...

Alexander Petkov macht mit zwei unter der MIT-Lizenz frei nutzbaren HTML5-Komponenten auf sich aufmerksam. Powerange erlaubt die Erstellung schicker Slider im von iOS7 inspirierten Flat Design und mit Switchery baut man dazu passende Schalter. Beide Komponenten funktionieren als Kombination von CSS und JavaScript ohne weitere Abhängigkeiten und laufen in allen modernen Browsern, sogar im Internet Explorer (Switchery 8+, Powerange 9+). Man muss kein Fan von iOS7 sein, um sich an den vielen Fähigkeiten von Powerange und Switchery zu erfreuen.

switchery-powerange

Powerange – Ganz frisches UI-Tool zum Sliderbauen

powerange

Powerange ist erst wenige Tage alt, aber die Inspiration ist schon älter. Petkov ist ein Fan der Powerrangers und das sieht man dem Projekt nicht nur am Namen an. Wer möchte kann sogar seine Slider mit Buttons in Form von Powerrangers-Helden gestalten. Alle anderen werden eher den schlichten Flat Design Stil wählen, der dieser Tage so überaus populär ist.

Mit Powerange erstellen Sie Slider, die sich per CSS und JavaScript genau an die Erfordernisse Ihres Projekts anpassen lassen. Ob Sie horizontale oder vertikale Slider benötigen, bunte oder schlichte, Startwerte oder Mindest- und Maximalwerte mit definierten Intervallen setzen wollen, Powerange ist dazu in der Lage. Auch die Verwendung von Icons anstelle von Zahlenwerten ist möglich. Mir ist kein Anwendungsbedarf eingefallen, den man mit dem Tool nicht abbilden kann. Natürlich, soweit es sich um den Bedarf an Reglern zur Einstellung von Werten handelt.

Die Verwendung ist einfach. Hat man das CSS und JavaScript aus dem Github-Repository erst einmal eingebunden, initialisiert man Powerange, welches sich fortan um jegliches Inputfeld vom Typ Text kümmert, dass Sie definieren und zusätzlich mit einer kompatiblen Klasse ausstatten. Die Standardwerte werden einmalig über defaults mitgegeben, können jedoch an jedem Element per CSS verändert werden.

Da Powerange seine Fähigkeiten über benutzerdefinierte Klassen ausspielt, sind der Fantasie kaum Grenzen gesetzt, es wird allerdings auch eine Bereitschaft zur Einarbeitung vorausgesetzt. Powerange ist keine Automatik, die Sie nur an- oder ausschalten müssen.

Nachdem Powerange völlig kostenfrei unter MIT-Lizenz verwendet werden kann, sollten Sie das Tool jedenfalls im "Mobile Web"-Eckchen Ihres Entwickler-Werkzeugkastens ablegen.

Kennst du unser E-Book-Bundle? Spare jetzt 6,99 €!

E-Book Bundle von Andreas Hecht

Powerange im WWW: Demo | Github Repository

Switchery – Flache Schalter, so bunt Sie wollen

switchery

Switchery funktioniert im Wesentlichen identisch zu Powerange, nur dass es sich nicht mit Wertebereichen befasst, sondern mit simplem Ein-/Aus-Schaltern. Insofern benötigt Switchery keine Input-Felder des Typs "Text" wie Powerange, sondern solche des Typs "Checkbox".

Die gesamte übrige Vorgehensweise nebst Syntax ist identisch zum eben beschriebenen Projekt. Insofern ergibt es mehr als Sinn, sich für Sliders und Switches auf Petkovs Gesamtpaket zu verlassen.

switchery-github-pic

Switchery im WWW: Demo | Github Repository

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design. Man findet ihn auch auf Twitter und Google+.

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

Benachrichtige mich zu:
avatar
wpDiscuz