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 opción Valores de controles deslizantes se utiliza para definir un conjunto de valores que el control deslizante permitiría seleccionar. Esto se puede utilizar para limitar el número de opciones y especificar exactamente los valores legales disponibles. El conjunto de valores se pasa como una array de enteros.
Sintaxis:
{ values: [ a, b, c... ] }
Valores:
- array: Esta es una array que especifica los valores que el control deslizante permitiría para la selección.
Ejemplo 1:
<!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 values</h2>
<p>
Move the slider to check the values
that have been already set
</p>
<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">
new Control.Slider('handle-hor',
'track-hor', {
range: $R(1, 100),
// Define the values that can
// be set by the slider
values: [25, 50, 75, 90],
onSlide: function (val) {
document.querySelector("#out")
.textContent = val;
}
});
</script>
</body>
</html>
Producción:
Ejemplo 2:
<!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: 5px;
background-color: gray;
height: 150px;
position: relative;
}
.track .handle {
width: 20px;
height: 10px;
background-color: green;
cursor: move;
position: absolute;
left: -8px;
}
.pad {
padding: 25px;
}
</style>
</head>
<body>
<p>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h2>Sliders values</h2>
<p>Move the slider to check the values
that have been already set</p>
<div class="pad">
<div id="track-vert" class="track">
<div id="handle-vert" class="handle"></div>
</div>
</div>
<p>Current Slider Value:
<span id="out">0</span>
</p>
<script type="text/javascript">
new Control.Slider('handle-vert',
'track-vert', {
range: $R(1, 100),
axis: 'vertical',
// Define the values that can be
// set by the slider
values: [1, 5, 10, 50, 100],
onSlide: function (val) {
document.querySelector("#out")
.textContent = 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