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.
El rango de controles deslizantes se utiliza para definir el rango del control deslizante. El control deslizante solo puede moverse dentro del valor definido para ambos extremos. El rango debe especificarse usando la sintaxis $R(min, max), donde min indica el valor mínimo del control deslizante y max indica el valor máximo.
Sintaxis:
{ range: $R( min, max ) }
Valores: esta opción tiene dos valores, como se mencionó anteriormente y se describe a continuación:
- min: Este es un número que denota el valor mínimo del rango del control deslizante.
- max: Este es un número que denota el valor máximo del rango del control deslizante.
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: 200px;
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 range</h2>
<p>
The "range" option can be used to
set the range of the slider.
</p>
<div class="pad">
<div id="track-hor" class="track">
<div id="handle-hor" class="handle">
</div>
</div>
</div>
<p>Current Slider1 Value:
<span id="out1"></span>
</p>
<div class="pad">
<div id="track2-hor" class="track">
<div id="handle2-hor" class="handle">
</div>
</div>
</div>
<p>Current Slider2 Value:
<span id="out2"></span>
</p>
<script type="text/javascript">
new Control.Slider('handle-hor',
'track-hor', {
// Setting the range of the slider
// from 0 to 100
range: $R(0, 100),
sliderValue: 50,
onSlide: (val) => {
document.querySelector("#out1")
.textContent = val;
}
});
new Control.Slider('handle2-hor',
'track2-hor', {
// Setting the range of the slider
// from 20 to 50
range: $R(20, 50),
sliderValue: 30,
onSlide: (val) => {
document.querySelector("#out2")
.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