jQuery UI consta de widgets GUI, efectos visuales y temas implementados mediante HTML , CSS y jQuery . 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. Podemos cambiar el valor del control deslizante deslizando. El método instance() se usa para devolver el objeto de instancia del control deslizante. Si el elemento deslizante no tiene un elemento asociado, devuelve undefined.
Sintaxis:
$( ".selector" ).slider( "instance" );
Parámetros: este método no acepta ningún parámetro.
Valor devuelto: este método devuelve el objeto de instancia del control deslizante.
Enlace CDN: Primero, agregue los scripts jQuery UI necesarios para su proyecto.
<enlace rel=”hoja de estilo” href=”//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css”>
<script src=”//code.jquery.com/jquery- 1.12.4.js”></script>
<script src=”//code.jquery.com/ui/1.12.1/jquery-ui.js”></script>
Ejemplo: Este ejemplo describe el método jQuery UI Slider instance() .
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title> jQuery UI Slider instance() Method </title>
<link rel="stylesheet" href=
"//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src=
"//code.jquery.com/jquery-1.12.4.js"></script>
<script src=
"//code.jquery.com/ui/1.12.1/jquery-ui.js">
</script>
<style>
h1 {
color: green;
}
#divID {
width: 600px;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h2>jQuery UI Slider instance() Method</h2>
<div id="divID"></div>
<br>
<input type="button" id="btn"
value="Slider Instance Value"
style="padding: 5px 15px;">
<br>
<div id="res"></div>
</center>
<script>
$(function () {
$("#divID").slider();
$("#btn").on('click', function() {
var res = $("#divID").slider("instance");
console.log(res);
});
});
</script>
</body>
</html>
Producción:
Referencia: https://api.jqueryui.com/slider/#method-instance
Publicación traducida automáticamente
Artículo escrito por blalverma92 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA