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