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.
Deslizadores sliderValue
Sintaxis:
{ sliderValue: value }
Valores:
- valor: Este es un número que será el valor inicial del control deslizante. El valor predeterminado es 0.
Ejemplo
HTML
<!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>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h2>Sliders sliderValue</h2>
<p>
The slider has been initially set
to the values mentioned in the
sliderValue option
</p>
<div class="pad">
<div id="track-hor" class="track">
<div id="handle-hor" class="handle">
</div>
</div>
</div>
<div class="pad">
<div id="track2-hor" class="track">
<div id="handle2-hor" class="handle">
</div>
</div>
</div>
<script type="text/javascript">
new Control.Slider('handle-hor',
'track-hor', {
range: $R(1, 10),
// Set the initial value
// of the slider
sliderValue: 7.75,
});
new Control.Slider('handle2-hor',
'track2-hor', {
range: $R(1, 10),
// Set the initial value
// of the slider
sliderValue: 2,
});
</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