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. Este 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. Podemos crear el control deslizante para establecer el rango y los usuarios pueden elegir cualquier valor arrastrando el control deslizante. Slider Vertical se usa para crear el control deslizante vertical y podemos establecer el valor inicial y final del control deslizante y establecer el atributo data-vertical=”true” para que funcione perfectamente.
En este artículo, discutiremos cómo crear el control deslizante vertical en Foundation CSS.
Fundación CSS Slider Clase vertical:
- vertical : Se utiliza para crear el control deslizante en la dirección vertical.
Sintaxis:
<div class="slider vertical" data-slider
data-initial-start="1" data-end="100"
data-vertical="true">
...
</div>
Ejemplo 1: El siguiente código demuestra el control deslizante vertical .
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 Vertical</h3>
<div class="slider vertical"
data-slider data-initial-start="1"
data-end="100" data-vertical="true">
<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 vertical 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"
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 Vertical</h3>
<div class="slider vertical"
data-slider data-initial-start="1"
data-end="100" data-vertical="true">
<span class="slider-handle"
data-slider-handle role="slider"
aria-controls="slidervalue">
</span>
<span class="slider-fill"
data-slider-fill>
</span>
</div> <br>
<strong>Value is:</strong>
<input type="number" class="button"
name="" id="slidervalue">
</center>
<script>
$(document).ready(function () {
$(document).foundation();
});
</script>
</body>
</html>
Producción:
Referencia: https://get.foundation/sites/docs/slider.html#vertical
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