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. Es más complejo, versátil y configurable. También viene con una interfaz de línea de comandos, lo que facilita su uso con paquetes de módulos. El marco de correo electrónico le proporciona correos electrónicos HTML receptivos, que se pueden leer en cualquier dispositivo. Foundation for apps le permite crear aplicaciones web totalmente receptivas.
El control deslizante se usa para especificar el rango de valores cuando arrastramos el control deslizante. Control deslizante de dos manijas significa que el control deslizante tiene dos manijas de arrastre y podemos arrastrar ambas manijas. Se utiliza un control deslizante de dos manijas para definir un rango de valores frente a un solo valor dado. Podemos crear controles deslizantes de dos manijas tanto horizontales como verticales. Para hacer dos controles deslizantes, use dos elementos con una clase de control deslizante y dos elementos de entrada.
En este artículo, discutiremos cómo crear el control deslizante de dos manijas en Foundation CSS.
Clase Foundation CSS Slider Two Handles:
- slider-handle: Se utiliza para crear el control deslizante.
Sintaxis:
<div class="slider" data-slider
data-initial-start="25"
data-initial-end="75">
<span class="slider-handle"
data-slider-handle
role="slider" tabindex="1">
</span>
...
</div>
Ejemplo 1: el código siguiente muestra el control deslizante horizontal con dos controladores.
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>
<h2 style="color:green">
GeeksforGeeks
</h2>
<h3>Foundation CSS Slider Two Handles</h3>
<div class="slider" data-slider
data-initial-start="15"
data-initial-end="83">
<span class="slider-handle"
data-slider-handle role="slider">
</span>
<span class="slider-fill"
data-slider-fill></span>
<span class="slider-handle"
data-slider-handle role="slider">
</span>
<input type="hidden" />
<input type="hidden" />
</div>
</center>
<script>
$(document).ready(function () {
$(document).foundation();
});
</script>
</body>
</html>
Producción:
Ejemplo 2: El siguiente código muestra el control deslizante vertical con dos manijas.
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>
<h2 style="color:green">
GeeksforGeeks
</h2>
<h3>Foundation CSS Slider Two Handles</h3>
<div class="slider vertical"
data-slider data-initial-start="28"
data-initial-end="90" data-vertical="true">
<span class="slider-handle"
data-slider-handle role="slider">
</span>
<span class="slider-fill" data-slider-fill></span>
<span class="slider-handle"
data-slider-handle role="slider">
</span>
<input type="hidden" />
<input type="hidden" />
</div>
</center>
<script>
$(document).ready(function () {
$(document).foundation();
});
</script>
</body>
</html>
Producción:
Referencia: https://get.foundation/sites/docs/slider.html#two-handles
Publicación traducida automáticamente
Artículo escrito por singh_teekam y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA