Wollte mal fragen ob jemand mir sagen kann, wie ich eine Zahl mittig über dem Slider einer Range schweben lassen kann. Ich hab es schon so weit gebracht, dass sich die zahl mit Hilfe von oninput live verändert, kriege es aber nur als normalen text ausgegeben. Mein Lehrer sagt ich soll das irgendwie mit tables hinkriegen aber ich hab jetzt nach mehreren Stunden immer noch nicht rausgekriegt, wie ich das machen soll. Das Ziel bisher war, die Geschwindigkeit zwei abwechselnd blinkende Bilder mit einer Tange kontrollieren zu können. Dann habe ich noch einen output der momentan eingestellten ms eingebaut. Jetzt will ich genau diese Zahl mittig über dem Slider haben. Bin für alle Hilfe sehr erfreut.
(wäre toll wenn das ohne JQuery oder ähnliche JavaScript bibliotheken gehen würde)
Mein bisheriger Script (sorry, dass der ein wenig durcheinander ist):
<!DOCTYPE html>
<html>
<body>
<img id="myImage" src="pic_bulboff.gif" width="100" height="180">
<button id="mybutton" class="buttonstyle" onclick="button()">Blinking ON</button>
<p id="rangetxt" class="th"></p>
<input type="range" id="myrange" oninput="changerange();rangechange();" value="125" min="20" max="230">
<script>
function light() {
var image = document.getElementById("myImage");
if (image.src.match("bulbon"))
{
image.src = "pic_bulboff.gif";
}
else
{
image.src = "pic_bulbon.gif";
}
}
function button() {
var button = document.getElementById("mybutton");
var image = document.getElementById("myImage");
var waittime = document.getElementById("myrange").value;
if (button.innerHTML.match("Blinking ON"))
{
button.innerHTML = "Blinking OFF";
myvar = setInterval(light , waittime);
}
else
{
button.innerHTML = "Blinking ON";
clearInterval(myvar)
image.src = "pic_bulboff.gif";
}
}
function changerange() {
var button = document.getElementById("mybutton");
if (button.innerHTML.match("Blinking OFF"))
{
clearInterval(myvar)
myvar = setInterval(light ,document.getElementById("myrange").value);
}
}
function rangechange() {
valueoutput = document.getElementById("myrange").value;
document.getElementById("rangetxt").innerHTML = valueoutput;
}
rangechange()
</script>
</body>
</html>
