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. jQuery UI 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 máxima en un control deslizante. La opción max se utiliza para establecer el rango superior del control deslizante.
Sintaxis:
$(".selector").slider(
{ max : 20}
);
Parámetros: Esta opción acepta un parámetro como se explica a continuación.
- número: El rango superior del control deslizante que se va a establecer.
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 un valor numérico máximo de 15.
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(
{max : 15}
);
});
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>jQuery UI | slider max option</h2>
<div id="gfg"></div>
</body>
</html>
Producción:
Ejemplo 2: En este ejemplo, usaremos la opción de rango con un valor de número mínimo y máximo como 0 y 500.
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({
range: true,
min: 0,
max: 500,
values: [ 100, 300 ],
});
});
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>jQuery UI | slider max option</h2>
<div id = "gfg"></div>
</body>
</html>
Producción:
Referencia: https://api.jqueryui.com/slider/#option-max