jQuery UI consta de widgets GUI, efectos visuales y temas implementados mediante jQuery, CSS y HTML. jQuery UI es excelente para crear interfaces de interfaz de usuario para las páginas web. jQueryUI nos proporciona un control deslizante a través del widget deslizante. El control deslizante nos ayuda a obtener un cierto valor usando un rango dado. En este artículo veremos cómo configurar la opción de orientación en un control deslizante. La opción de orientación se utiliza para establecer la orientación del control deslizante.
Sintaxis:
$(".selector").slider(
{ orientation : 'horizontal'}
);
Parámetros: esta opción acepta un parámetro como se explica a continuación:
- string : La orientación del control deslizante que se establecerá. Por defecto, el valor es orientación.
Enlace CDN: Primero, agregue los scripts jQuery UI necesarios para su proyecto.
<enlace href = «https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css» rel = «hoja de estilo»>
<script src = «https://code. jquery.com/jquery-1.10.2.js”></script>
<script src = “https://code.jquery.com/ui/1.10.4/jquery-ui.js”></script>
Ejemplo 1: en este ejemplo, usaremos el valor de string como vertical .
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link href=
"https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel="stylesheet"/>
<script src=
"https://code.jquery.com/jquery-1.10.2.js">
</script>
<script src=
"https://code.jquery.com/ui/1.10.4/jquery-ui.js">
</script>
<script>
$(function () {
$("#gfg").slider({ orientation: "vertical" });
});
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>jQuery UI | slider orientation option</h2>
<div id="gfg"></div>
</body>
</html>
Producción:
Ejemplo 2: en este ejemplo, usaremos el valor de string como horizontal .
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link href=
"https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel="stylesheet"/>
<script src=
"https://code.jquery.com/jquery-1.10.2.js">
</script>
<script src=
"https://code.jquery.com/ui/1.10.4/jquery-ui.js">
</script>
<script>
$(function () {
$("#gfg").slider({ orientation: "vertical" });
});
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>jQuery UI | slider orientation option</h2>
<div id="gfg"></div>
</body>
</html>
Producción:
Reference:https://api.jqueryui.com/slider/#option-orientation