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. 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 usar el método value() en el control deslizante de jQuery UI.
El método value() se utiliza para obtener el valor actual del control deslizante. Este método tiene un submétodo llamado valor (valor) , aquí podemos establecer el valor del control deslizante.
Sintaxis:
$( ".selector" ).slider("value");
$( ".selector" ).slider("value", number);
var a = $( ".selector" ).slider("value", number);
Parámetros:
- value: es un valor numérico a configurar.
- número: es un índice de valor numérico en el que se va a obtener el valor.
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»>
<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>
Ejemplo 1: En este ejemplo, hemos utilizado el método value() para obtener el valor del control deslizante en cada clic.
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();
$("#gfg").slider("value");
});
function gfgg() {
var a = $("#gfg").slider("value");
console.log(a);
}
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>jQuery UI | slider value() Method</h2>
<div id="gfg" onclick="gfgg()"></div>
</body>
</html>
Producción:
Ejemplo 2: En este ejemplo, hemos utilizado el método de valor (valor) para establecer el valor del control deslizante para obtener el control deslizante en un índice en particular, aquí es 24.
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();
$("#gfg").slider("value", 24);
});
function gfgg() {
$("#gfg").slider("value");
}
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>jQuery UI | slider value(value) Method</h2>
<div id="gfg" onclick="gfgg()"></div>
</body>
</html>
Producción:
Referencia: https://api.jqueryui.com/slider/#method-value