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 evento de cambio se usa para activarse cuando se cambia el valor del control deslizante.
El evento de cambio de control deslizante acepta dos valores que se enumeran a continuación:
- evento: Representa el evento para el control deslizante.
- ui: es de un tipo de objeto que acepta tres valores que son:
- handle: Representa el handle que se cambió. Es de tipo Elemento.
- handleIndex: Representa el índice numérico del handle que se mueve cuando se desliza el slider. Es de un valor de tipo Número.
- value: Representa el valor actual del slider. Es de un valor de tipo numérico.
Sintaxis:
Inicialice el control deslizante con la devolución de llamada de cambio:
$( ".selector" ).slider({
change: function( event, ui ) {}
});
Vincule un detector de eventos al evento slidechange:
$( ".selector" ).on(
"slidechange",
function( event, ui ) {}
);
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 evento de cambio del control deslizante de jQuery UI.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>
jQuery UI Slider change Event
</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;
}
#GFG {
width: 600px;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h2>jQuery UI Slider change Event</h2>
<div id="GFG"></div>
</center>
<script>
$(function () {
$("#GFG").slider();
$("#GFG").on('slidechange', function () {
alert('Change Event Triggered!');
})
});
</script>
</body>
</html>
Producción:
Referencia: https://api.jqueryui.com/slider/#event-change
Publicación traducida automáticamente
Artículo escrito por blalverma92 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA