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. El enlace de datos del control deslizante se utiliza para conectar el control deslizante con la etiqueta de entrada . Cuando arrastramos el controlador, el valor del control deslizante se mostrará dentro del campo de texto de entrada en tiempo real. Si cambiamos el valor dentro del campo de entrada, el control deslizante saltará a la posición de valor dada en el control deslizante. En este artículo, discutiremos el enlace de datos deslizantes en Foundation CSS.
Clase de enlace de datos del control deslizante Foundation CSS:
- slider : esta clase se utiliza para crear el control deslizante.
Sintaxis:
<div class="slider" data-slider>
<span class="slider-handle" data-slider-handle
role="slider" aria-controls="sliderValue">
</span>
<span class="slider-fill" data-slider-fill></span>
</div>
<input type="number" id="sliderValue">
Ejemplo 1: el siguiente código demuestra el enlace de datos del 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"
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>
<h1 style="color:green"> GeeksforGeeks </h1>
<h3> Foundation CSS Slider Data Binding </h3>
<div class="grid-x grid-margin-x">
<div class="cell small-10">
<div class="slider" data-slider
data-initial-start="15">
<span class="slider-handle" data-slider-handle
role="slider" tabindex="1"
aria-controls="sliderValue">
</span>
<span class="slider-fill" data-slider-fill>
</span>
</div>
</div>
<div>
<input type="number" id="sliderValue">
</div>
</div>
</center>
<script>
$(document).ready(function () {
$(document).foundation();
});
</script>
</body>
</html>
Producción:
Ejemplo 2: el siguiente código demuestra el enlace de datos del control deslizante con un control deslizante de tamaño de paso .
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"
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>
<h1 style="color:green"> GeeksforGeeks </h1>
<h3> Foundation CSS Slider Data Binding</h3>
<strong>
Step size: 10
</strong>
<div class="grid-x grid-margin-x">
<div class="cell small-10">
<div class="slider" data-slider
data-initial-start="20" data-step="10">
<span class="slider-handle" data-slider-handle
role="slider" tabindex="1"
aria-controls="sliderValue1">
</span>
<span class="slider-fill" data-slider-fill>
</span>
</div>
</div>
<div>
<input type="number" id="sliderValue1">
</div>
</div>
<strong>
Step size: 8
</strong>
<div class="grid-x grid-margin-x">
<div class="cell small-10">
<div class="slider" data-slider
data-initial-start="24" data-step="8">
<span class="slider-handle" data-slider-handle
role="slider" tabindex="2"
aria-controls="sliderValue2">
</span>
<span class="slider-fill" data-slider-fill>
</span>
</div>
</div>
<div>
<input type="number" id="sliderValue2">
</div>
</div>
</center>
<script>
$(document).ready(function () {
$(document).foundation();
});
</script>
</body>
</html>
Producción:
Referencia: https://get.foundation/sites/docs/slider.html#data-binding
Publicación traducida automáticamente
Artículo escrito por harendra4373 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA