Powerange y Switchery: Conmutadores y controles deslizantes HTML5 en diseño plano

Alexander Petkov crea ondas al desarrollar dos componentes HTML5 gratuitos siguiendo la popular tendencia del diseño plano. El último, Powerange, le permite crear controles deslizantes de rango modernos claramente inspirados en iOS7 y el antiguo Switchery hace el mismo trabajo para los interruptores. Ambos componentes están diseñados como combinaciones de CSS y JavaScript sin más dependencias y se ejecutan en todos los navegadores modernos, incluso Internet Explorer (desde 8+ en Switchery y 9+ en Powerange). No es necesario que seas fanático de iOS7 para disfrutar de las características de los componentes de Petkov, ya que la personalización te permite llevar la apariencia a donde quieras.

Powerange: nueva herramienta de interfaz de usuario para BYOS (construya su propio control deslizante)

Powerange tiene solo unos días, mientras que lo que inspiró es mucho más antiguo. Petkov es fanático de la serie de televisión Powerangers y no solo lo reconoces por el nombre del proyecto. Si lo desea, puede hacerlo como Alexander y construir un control deslizante en la tradición y con el aspecto de un Powerranger real. Si eres más como yo, es posible que prefieras no hacerlo, sino quedarte con un diseño plano simple, moderno y minimalista.

Powerange le permite crear controles deslizantes, en gran parte personalizables con CSS y JavaScript para adaptarse mejor al diseño del proyecto en el que está trabajando. Ya sea que necesite controles deslizantes horizontales o verticales, decentes o coloridos, con valores iniciales o mínimos y máximos en intervalos definidos, POwerange hará el trabajo. Incluso puede optar por utilizar iconos en lugar de valores numéricos. No pude encontrar ninguna capacidad faltante cuando se trata de controles deslizantes de rango.

El uso es simple. Con los archivos CSS y Javascript necesarios incrustados, inicialice POwerange y, a partir de ese momento, procesará cada campo de tipo de entrada «texto» que defina y equipe con una clase compatible. Los valores predeterminados se definen de antemano utilizando defaults pero se puede modificar a través de CSS junto con cualquier instancia dada de un control deslizante.

Dado que Powerange extrae su funcionalidad en gran medida de las clases personalizadas, lo que puede hacer está limitado por lo que puede imaginar hacer. Esto significa que Powerange no es exactamente para el novato. Será necesario al menos un pequeño período de entrenamiento para acostumbrarse a la herramienta. Powerange no es una de esas herramientas que no necesitan nada más que ser encendidas o apagadas.

Como Powerange le llega de forma completamente gratuita según los términos de la licencia MIT, definitivamente debe agregarlo a su caja de herramientas de desarrollador.

Powerange en la red: Manifestación | Repositorio Github

Switchery – Interruptores planos, como BAYL (Bright As You Like)

Switchery funciona más o menos de la misma manera que lo hace Powerange. La principal diferencia es que Switchery no procesa valores de rango, sino estados simples de encendido y apagado. En consecuencia, no funciona con la entrada de texto, pero espera ser alimentado con el tipo de entrada checkbox.

A partir de aquí, todo, incluso la sintaxis, es completamente idéntica a Powerange, lo que lo convierte en el complemento perfecto y un socio constante en su flujo de trabajo de desarrollo. Cuando se trata de controles deslizantes e interruptores planos, confíe en de Alejandro dúo.