El componente Slider de JQuery UI permite realizar la selección de un valor numérico. Sus principales propiedades son:
- disabled: desactiva el componente.
- max: valor máximo admitido.
- min: valor mínimo permitido.
- orientation: configura la orientación del componente ('vertical' u 'horizontal').
- step: configura el incremento y decremento a aplicar cuando se utiliza el slider.
- value: permite establecer y obtener el valor actual.
En cuanto a sus métodos, entre otros disponemos de:
- destroy(): elimina el componente.
- enable() / disable(): activar/desactivar el slider.
- value(): devuelve o establece el valor actual.
Asimismo nos serán útiles los siguientes eventos:
- change: se produce tras soltar el botón y antes de producirse el evento 'stop'.
- slide: cuando se mueve el deslizador sin soltar el botón.
- stop: se lanza después de soltar el botón y antes de producirse el evento 'change'.
El siguiente ejemplo te ayudará a comprender mejor su funcionamiento:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>InformaticaPC | Slider con JQuery UI</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
body { background-color:lightyellow;font-family:Arial;font-size:10pt; }
#log { color:yellow;background-color:red;margin-bottom:10px; }
#slider { width:200px;margin:20px 0px 20px 100px; }
</style>
<!-- Observa que agregamos también la librería JQuery UI -->
<script type="text/javascript" src="../lib/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../lib/jquery-ui-1.10.1.custom.min.js"></script>
<!-- Agregamos también el archivo CSS del theme que usemos -->
<link type="text/css" rel="stylesheet" href="../lib/css/smoothness/jquery-ui-1.10.1.custom.css" />
<script type="text/javascript">
$(document).ready(function()
{
// Mostrar el slider
$("#slider").slider( {min:100,
max:1000,
value:300,
slide:movimiento,
change:cambiado,
stop:parado
});
// Aplicar al slider un valor introducido
$("#btnEstablecer").click(function()
{
var valor = $("#establecer").val();
$("#slider").slider( {value : valor} );
})
});
// ---------------
// A cada movimiento del deslizador sin soltar el botón
function movimiento( event, ui )
{
$("#log").append("slide ");
$("#mover").attr("value", ui.value );
}
// ---------------
// Después de soltar el botón y después de producirse el evento 'stop'
function cambiado( event, ui )
{
$("#log").append("change ");
$("#mostrar").attr("value", ui.value);
}
// ---------------
// Justo después de soltar el botón y antes de producirse el evento 'change'
function parado( event, ui )
{
$("#log").append("stop ");
}
</script>
</head>
<body>
<div id="log"> </div>
<p>Usa el desplazador:</p>
<div id="slider"></div>
<label for="mostrar">Valor al mover:</label>
<input type="text" id="mover" size="4" value="" readonly="readonly" />
<label for="mostrar">Valor actual:</label>
<input type="text" id="mostrar" size="4" value="" readonly="readonly" />
<p>Introduce un número del 1 al 1000 y pulsa el botón:</p>
<input type="text" id="establecer" size="4" value="500" />
<input type="button" id="btnEstablecer" value="Aplicar" />
</body>
</html>
EXPLICACIÓN:
- El Slider se crea a partir de un elemento HTML 'DIV', tras llamarse al método slider() después de cargarse la página web.
- Observa cómo se disparan los diferentes eventos al cambiar el valor del componente.
Vea también: [ Slider ] - [ Slider (ejemplo) ]
