script.aculo.us Schiebereglerbereich Option
Die Bibliothek script.aculo.us ist eine browserübergreifende Bibliothek, die darauf abzielt, die Benutzeroberfläche einer Website zu verbessern. Die Slider-Steuerelemente sind dünne Spuren, die es dem Benutzer ermöglichen, Werte einzugeben. Dazu wird ein Wertebereich definiert, der vom Benutzer ausgewählt werden kann, indem er den Ziehpunkt auf den entsprechenden Wert zieht.
Der Schiebereglerbereich wird verwendet, um den Bereich des Schiebereglers zu definieren. Der Schiebegriff kann sich nur innerhalb des für beide Enden definierten Wertes bewegen. Der Bereich muss mit der $R(min, max)-Syntax angegeben werden, wobei min den minimalen Wert des Schiebereglers und max den maximalen Wert bezeichnet.
Syntax:
{ range: $R( min, max ) }
Werte: Diese Option hat zwei Werte, wie oben erwähnt und unten beschrieben:
- min: Dies ist eine Zahl, die den Mindestwert des Bereichs des Schiebereglers angibt.
- max: Dies ist eine Zahl, die den maximalen Wert des Bereichs des Schiebereglers angibt.
Beispiel:
<!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>
Ausgabe:
