La función de control deslizante en la interfaz de usuario de Jquery se puede usar para seleccionar datos numéricos como una entrada del usuario. Slider tiene muchas aplicaciones en una página web, como usarlo para control de volumen, selector de color, controlar el tamaño y las resoluciones de varias imágenes, etc. Usaremos el enlace CDN en el código para agregar diferentes bibliotecas y estilos. Para mostrar este control deslizante como cualquier otro widget de jQuery UI, tenemos que vincular a jQuery y jQuery UI. Copie este código dentro de su archivo HTML para vincular el archivo a jquery y jquery UI a través de CDN (red de entrega de contenido). Aquí hemos usado el CDN de google pero también puedes usar jquery o el CDN de Microsoft
<enlace href=’https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css’rel=’hoja de estilo’>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js”></script>
<script src=”https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js”></script>
Después de conectarnos a jQuery UI, ahora podemos usar la función de control deslizante en nuestra página web. Al igual que cualquier otro código jQuery, la función de control deslizante también se escribe dentro de la etiqueta del script en un documento HTML.
Los siguientes ejemplos ilustrarán el ejemplo del control deslizante de jQuery UI
:
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI| Slider</title>
<link rel="stylesheet" href=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<style>
h1 {
color: green;
}
div {
width: 400px;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h4>JQuery UI slide</h4>
<div id="my_slider"></div>
<div id=my_display></div>
<script>
$(document).ready(function() {
$(function() {
$("#my_slider").slider({
slide: function(event, ui) {
$("#my_display").html(ui.value);
}
});
});
})
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
</center>
</body>
</html>
Producción:
Gestión de diferentes atributos de un control deslizante: podemos controlar diferentes atributos del control deslizante, como el paso, la orientación, el valor mínimo, el valor máximo. A continuación se muestra un ejemplo en el que hemos asignado valores a estos atributos.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
<style>
h1 {
color: green;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h4>JQuesry UI slide</h4>
<div id="my_slider"></div>
<div id=my_display></div>
<script>
$(document).ready(function() {
$(function() {
$("#my_slider").slider({
min: 0,
max: 100,
step: 2,
orientation: "vertical",
slide: function(event, ui) {
$("#my_display").html(ui.value);
}
});
});
})
</script>
</center>
</body>
</html>
Producción:
Manejo de eventos del control deslizante: aquí hay un ejemplo de tres eventos de un control deslizante, uno al comienzo del control deslizante, el segundo cuando el control deslizante está en movimiento y el tercero cuando el control deslizante se detiene. Podemos usar nuestros códigos requeridos dentro de esos eventos (funciones) en nuestro aplicaciones
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Handling events of Slider</title>
<link rel="stylesheet" href=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<style>
h1 {
color: green;
}
div {
width: 400px;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h4>JQuesry UI slide</h4>
<div id=my_display_event></div>
<br>
<br>
<div id="my_slider"></div>
<div id=my_display></div>
<script>
$(document).ready(function() {
$(function() {
$("#my_slider").slider({
slide: function(event, ui) {
$("#my_display").html(ui.value);
$("#my_display_event").html('Slider on move...');
},
start: function(event, ui) {
$("#my_display_event").html('Slider Started...');
},
stop: function(event, ui) {
$("#my_display_event").html('Slider Stopped...');
}
});
});
})
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
</center>
</body>
</html>
Producción:
Seleccionar un conjunto de números usando el control deslizante: También podemos elegir un conjunto de números usando un valor inicial usando un control deslizante y un valor final usando otro control deslizante.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Handling events of Slider</title>
<link rel="stylesheet" href=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<style>
h1 {
color: green;
}
div {
width: 400px;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h4>JQuesry UI slide</h4>
<div id=my_display_event></div>
<br>
<br>
<div id="my_slider"></div>
<div id=my_display></div>
<script>
$(document).ready(function() {
$(function() {
$("#my_slider").slider({
min: 0,
max: 100,
values: [10, 30],
range: true,
slide: function(event, ui) {
$("#my_display_start").html("Start value:" + ui.values[0]),
$("#my_display_end").html("End value:" + ui.values[1]);
}
});
});
})
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
</center>
</body>
</html>
Producción:
Habilitar/deshabilitar un control deslizante: podemos habilitar o deshabilitar el control deslizante especificándolo en el método de entrada. Aquí, en el siguiente ejemplo, usamos un par de botones de radio para habilitar/deshabilitar el control deslizante. Al hacer clic en el botón de radio respectivo, se recopila el valor (el nombre de la variable es my_val) y, en consecuencia, se establece el estado del control deslizante.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Enabling/Disabling a Slider</title>
<style>
h1 {
color: green;
}
div {
width: 400px;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h4>JQuesry UI slide</h4>
<input type=radio name=radio_1 value=enable checked>Enable
<input type=radio name=radio_1 value=disable>Disable
<br>
<div id="my_slider"></div>
<div id=my_display></div>
<link rel="stylesheet" href=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$(function() {
$("#my_slider").slider({
slide: function(event, ui) {
$("#my_display").html(ui.value);
}
});
});
///Reading radio button values using change event//
$("input[type='radio']").change(function() {
my_val = $("input[name=radio_1]:checked").val()
$("#my_slider").slider(my_val);
})
})
</script>
</center>
</body>
</html>
Producción
Publicación traducida automáticamente
Artículo escrito por mayeshmohapatra y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA