La interfaz de usuario de jQuery consta de widgets de 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. La interfaz de usuario de jQuery 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 rango en un control deslizante. La opción de rango se utiliza para establecer el rango de un control deslizante.
Sintaxis:
$(".selector").slider(
{ range : 'string' | boolean}
);
Parámetros: Esta opción acepta dos parámetros como se describe a continuación.
- string : El rango del control deslizante que se establecerá. Los valores disponibles son min, max
- booleano: si se establece en true , el control deslizante tiene dos manijas. De forma predeterminada, el valor es falso .
Enlace CDN: Primero, agregue el enlace CDN de jQuery UI scripts, necesario para su tarea.
<enlace href = «https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css» rel = «hoja de estilo»>
<secuencia de comandos src = «https://code.jquery.com/jquery-1.10.2.js»></secuencia de comandos>
<secuencia de comandos src = «https://code.jquery.com/ui/1.10.4/jquery-ui.js»></secuencia de comandos>
Los siguientes ejemplos ilustran la opción de rango del control deslizante de jQuery UI:
Ejemplo 1: En este ejemplo, usaremos el valor booleano y estableceremos como verdadero .
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 });
});
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>jQuery UI | slider range Option</h2>
<div id="gfg"></div>
</body>
</html>
Producción:
Ejemplo 2: En este ejemplo, usaremos el valor de string y estableceremos como máximo
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: "max" });
});
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>jQuery UI | slider range Option</h2>
<div id="gfg"></div>
</body>
</html>
Producción:
Ejemplo 3: en este ejemplo, usaremos el valor de string como min .
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: "min" });
});
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>jQuery UI | slider range Option</h2>
<div id="gfg"></div>
</body>
</html>
Producción:
Referencia: https://api.jqueryui.com/slider/#option-range