La biblioteca script.aculo.us es una biblioteca multinavegador que tiene como objetivo mejorar la interfaz de usuario de un sitio web. Los controles deslizantes son pistas delgadas que permiten al usuario ingresar valores. Se realiza definiendo un rango de valores que el usuario puede seleccionar arrastrando el controlador al valor apropiado.
La función Sliders setValue se usa para actualizar el valor del control deslizante al valor dado. Moverá el mango del control deslizante a la posición adecuada de la pista del control deslizante. La función de devolución de llamada onChange() se invoca cada vez que se usa este método y se puede usar para rastrear el cambio en el valor.
Sintaxis:
setValue( value, handleIndex )
Parámetros: esta función tiene dos parámetros, como se mencionó anteriormente y se describe a continuación:
- valor: Es un número que se utilizará para actualizar el valor del control deslizante.
- handleIndex: se usa para definir el índice del control deslizante que se actualizará cuando se usan varios controles deslizantes. Es un parámetro opcional. Cuando no se pasa este valor, se actualiza el último control deslizante utilizado.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<!-- Include the required scripts -->
<script type="text/javascript"
src="prototype.js">
</script>
<script type="text/javascript"
src="scriptaculous.js?load = slider">
</script>
<!-- Style the Sliders so that they
are properly visible -->
<style type="text/css">
.track {
width: 250px;
background-color: gray;
height: 5px;
position: relative;
}
.track .handle {
width: 20px;
height: 10px;
background-color: green;
cursor: move;
position: absolute;
top: -2px;
}
.pad {
padding: 25px;
}
</style>
</head>
<body>
<p>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h2>Sliders setValue</h2>
<p>
The value of the slider can be set
by using the setValue() method
as shown below.
</p>
<input type="text" id="val">
<button onclick="setVal()">
Set Value
</button>
<div class="pad">
<div id="track-hor" class="track">
<div id="handle-hor" class="handle">
</div>
</div>
</div>
<p>Current Slider Value:
<span id="out">0</span>
</p>
<script type="text/javascript">
// Initialize the slider
let slider = new Control.Slider(
'handle-hor',
'track-hor', {
// Define the range
range: $R(1, 100),
onChange: function (v) {
document.querySelector("#out")
.textContent = v;
}
});
function setVal() {
// Get the value form the input box
let val =
document.querySelector("#val").value;
// Set the value of the slider
// to the given value
slider.setValue(val);
}
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA