Compatibilidad con Polyfill multirrango para controles deslizantes HTML5 de doble asa

los nuevas entradas de rango HTML5 Son fantásticos para cantidades y selecciones dinámicas como fechas. Pero el control deslizante de rango predeterminado no soporta múltiples manejadores.

Entrar Multirrango, una Polyfill creado para soportar múltiples manijas que funcionan correctamente y soportan todos los principales navegadores.

Esto es un herramienta gratuita y proporciona la mejor manera de añadir múltiples asas de forma nativa, sin utilizar un plugin. Este polyfill tiene dos recursos: una Archivo JS y un Archivo CSS. Ellos ambos trabajan en entradas de rango y tu puedes descarga los dos del repositorio principal de GitHub.

Tenga en cuenta que esto significa que necesita trabajar con navegadores que Ya soporta el rango de entrada. por defecto. También requiere variables CSS que no son compatibles en todos los navegadores.

Afortunadamente, Multirange utiliza un respaldo CSS donde se utilizan dos controles deslizantes de rango en lugar de uno. Esta no es una solución perfecta pero todavía ofrece una interfaz utilizable. En el lado positivo, este trabaja directamente de la caja sin condiciones.

Sólo agrega los archivos a tu sitio y podrás utilizar el múltiple atributo en sus campos deslizantes. Tú también puedes establecer rangos para valores de entrada con una coma.

Aquí está un breve fragmento de HTML utilizando el control deslizante Multirange:

Las asas pueden ser arrastrados el uno al otro e incluso dejados uno encima del otro. Y la entrada de rango todavía soporta navegación por teclado que es genial para la accesibilidad.

Todos población y muestras de código fuente se puede encontrar en la página web de Multirange, así que échale un vistazo si alguna vez buscas un Control deslizante de HTML de rango múltiple.