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.
Foundation CSS Slider ayuda a establecer valores específicos dentro de un rango. Permite especificar el valor del rango arrastrando una pequeña barra. También tiene un valor inicial y máximo para el control deslizante. Es útil en sitios web donde la calificación o la calidad de algo debe seleccionarse dentro de un rango.
Clases de controles deslizantes CSS básicos:
- slider-handle: esta clase se utiliza para establecer el controlador que arrastra el usuario. El control deslizante también puede tener dos manijas que tienen dos manijas de arrastre y podemos arrastrar ambas manijas.
- slider-fill: esta clase se usa para establecer el relleno que cambia de tamaño dinámicamente según el controlador.
- slider: esta clase se utiliza para configurar el control deslizante. El control deslizante vertical se usa para crear el control deslizante vertical y podemos establecer el valor inicial y final del control deslizante. El enlace de datos del control deslizante se utiliza para conectar el control deslizante con la etiqueta de entrada .
Nota: Los atributos del control deslizante Foundation CSS se aplican al elemento contenedor.
Atributos del control deslizante Foundation CSS:
- data-initial-start: Representa la posición de inicio del control deslizante.
- data-end: Representa el valor de rango máximo del control deslizante.
Sintaxis:
<div class="slider" ...> <span class="slider-handle" ...></span> <span class="slider-fill" ...></span> <input type="hidden"> </div>
Ejemplo 1: el siguiente código muestra el control deslizante en Foundation CSS .
HTML
<!DOCTYPE html>
<html>
<head>
<title>Foundation CSS 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" />
<!-- Compressed JavaScript -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js"
crossorigin="anonymous">
</script>
</head>
<body>
<center>
<h2 style="color:green">GeeksforGeeks</h2>
<h3>Foundation CSS Slider</h3>
<div class="slider"
data-slider data-initial-start="50"
data-end="200">
<span class="slider-handle"
data-slider-handle role="slider"
tabindex="1">
</span>
<span class="slider-fill"
data-slider-fill>
</span>
<input type="hidden">
</div>
</center>
<script>
$(document).ready(function () {
$(document).foundation();
});
</script>
</body>
</html>
Producción:
Deslizador CSS básico
Ejemplo 2: El siguiente código muestra el control deslizante con valor en Foundation CSS.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Foundation CSS 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" />
<!-- Compressed JavaScript -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js"
crossorigin="anonymous">
</script>
</head>
<body>
<center>
<h2 style="color:green">GeeksforGeeks</h2>
<h3>Foundation CSS Slider</h3>
<div class="slider"
data-slider data-initial-start="50"
data-end="200">
<span class="slider-handle"
data-slider-handle role="slider"
tabindex="1">
</span>
<span class="slider-fill"
data-slider-fill></span>
<br>
<strong>Value is:</strong>
<input type="number"
class="button"
name="" id="slidervalue">
</div>
</center>
<script>
$(document).ready(function () {
$(document).foundation();
});
</script>
</body>
</html>
Producción:
Deslizador CSS básico
Referencia: https://get.foundation/sites/docs/slider.html