Foundation CSS es un marco front-end receptivo y de código abierto creado por ZURB en septiembre de 2011 que simplifica la creación de sorprendentes sitios web, aplicaciones y correos electrónicos receptivos que funcionan en cualquier dispositivo. Muchas empresas, como Facebook, eBay, Mozilla, Adobe e incluso Disney, lo utilizan. El marco se basa en bootstrap, que es similar a SaaS. El marco se basa en un arranque similar a Saas. Es más sofisticado, flexible y fácilmente personalizable. También viene con CLI, por lo que es fácil de usar con paquetes de módulos. Ofrece la herramienta Fastclick.js para una renderización más rápida en dispositivos móviles.
El control deslizante de rango nativo CSS de Foundation ayuda a establecer valores específicos dentro de un rango. Permite especificar el valor del rango arrastrando una pequeña barra circular. Tiene un valor mínimo y máximo para el control deslizante. Es equivalente a <input type=”range”>, el elemento HTML nativo para los controles deslizantes de rango. No requiere JavaScript. Es útil en sitios web donde la calificación o la calidad de algo debe seleccionarse dentro de un rango.
Atributos del control deslizante de rango nativo de Foundation CSS:
- min: El valor mínimo del control deslizante.
- max: El valor máximo del control deslizante.
- pasos: Especifica el intervalo entre números legales en un elemento <input> .
- disabled : deshabilita el control deslizante de rango nativo.
Sintaxis:
<input type="range" min=".." max=".." step="..">
Ejemplo 1: el siguiente código de ejemplo demuestra el control deslizante de rango nativo en Foundation CSS.
HTML
<!DOCTYPE html> <html> <head> <title>Foundation CSS Native Range Slider</title> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin="anonymous" /> </head> <body> <center> <h2 style="color:green">GeeksforGeeks</h2> <h3>Foundation CSS Native Range Slider</h3> <input type="range" min="1" max="100" step="1"> </center> </body> </html>
Producción:
Deslizador de rango nativo CSS de Foundation
Ejemplo 2: el siguiente código muestra el control deslizante de rango nativo con el atributo deshabilitado en Foundation CSS.
HTML
<!DOCTYPE html> <html> <head> <title>Foundation CSS Native Range Slider disabled</title> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin="anonymous"/> </head> <body> <center> <h2 style="color:green">GeeksforGeeks</h2> <h3>Foundation CSS Native Range Slider disabled</h3> <input type="range" min="1" max="100" step="1" disabled> </center> </body> </html>
Producción :
Deslizador de rango nativo CSS de Foundation
Referencia: https://get.foundation/sites/docs/slider.html#native-range-slider