Foundation CSS es el marco frontend de CSS que se utiliza para crear sitios web, aplicaciones y correos electrónicos receptivos que funcionan perfectamente en cualquier dispositivo. Está escrito usando HTML, CSS y Javascript y es utilizado por muchas compañías famosas como Amazon, Facebook, eBay, etc. Utiliza paquetes como Grunt y Libsass para una codificación y control rápidos y un compilador Saas para acelerar el desarrollo.
El control deslizante se usa para especificar el rango del control deslizante cuando lo arrastramos hacia arriba/abajo o hacia la izquierda/derecha. Podemos establecer cualquier valor en el control deslizante arrastrando el controlador del control deslizante. También podemos mostrar el valor del control deslizante cuando arrastramos el control deslizante. En este artículo, aprenderemos sobre los conceptos básicos de Slider .
Clases de conceptos básicos de Foundation CSS Slider:
- slider: Se utiliza para crear el slider.
- slider-handle: se utiliza para crear el control deslizante para arrastrar.
- slider-fill: Nos muestra cuanto se llena el slider.
Sintaxis:
<div class="slider" data-slider>
<span class="slider-handle"
data-slider-handle role="slider"
tabindex="1">
</span>
<span class="slider-fill"
data-slider-fill>
</span>
<input type="hidden">
</div>
Ejemplo 1: el siguiente código muestra un control deslizante básico.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Compressed CSS -->
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" />
<!-- 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">
</script>
</head>
<body>
<center>
<h1 style="color: green">GeeksforGeeks</h1>
<h3>Foundation CSS Slider Basics</h3>
<div class="slider"
data-slider data-initial-start="1"
data-end="50">
<span class="slider-handle"
data-slider-handle
role="slider"
tabindex="1">
</span>
<span class="slider-fill"
data-slider-fill>
</span>
</div>
</center>
<script>
$(document).ready(function () {
$(document).foundation();
});
</script>
</body>
</html>
Producción:
Ejemplo 2: el código siguiente muestra el control deslizante con un valor de control deslizante .
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Compressed CSS -->
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" />
<!-- 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">
</script>
</head>
<body>
<center>
<h1 style="color: green">GeeksforGeeks</h1>
<h3>Foundation CSS Slider Basics</h3>
<div class="slider"
data-slider
data-initial-start="10"
data-end="100">
<span class="slider-handle"
data-slider-handle
role="slider"
tabindex="1">
</span>
<span class="slider-fill"
data-slider-fill>
</span>
<input type="number">
</div>
<br>
<div class="slider"
data-slider
data-initial-start="35"
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="number">
</div>
</center>
<script>
$(document).ready(function () {
$(document).foundation();
});
</script>
</body>
</html>
Producción:
Referencia: https://get.foundation/sites/docs/slider.html#basics
Publicación traducida automáticamente
Artículo escrito por harendra4373 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA