• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Slider (Range Slider) Problem Ausgangssituation des Schiebers

ASbetebe

Neues Mitglied
Hallo,
ich möchte gerne einen Wert mit einem Schieber einstellen. Ich habe schon zig Varianten ausprobiert aber immer wieder das Problem das die Ausgangsposition des Schiebers nicht korrekt ist.
Der Wert neben dem Schieber zeigt den vorgegebenen "default" Wert korrekt an. Aber der Schieber ist ganz links.
Ich möchte aber mit javascript einen Wert und die damit verbundene Position des Schiebers vorgeben.

Sobald ich mit der Maus den Schieber bewege passt der angezeigte Wert zu der Schieberposition.

<div class="slidecontainer">
<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
</div>

<script>
var slider = document.getElementById("myRange");
slider.value = 80;
slider.innerHTML = slider.value;

slider.oninput = function() {
slider.innerHTML = this.value;
}
</script>

Wenn ich in HTML einen default Wert (value="50") vorgebe wird der Schieber richtig positioniert nicht mehr linksbündig sondern richtigerweise mittig positioniert.

Wie kriege ich es nun hin, dass der Slider grafisch die richtige vorgegebene Position einnimmt.



Ohne value="50"
5078


Mit value="50"
5076
 
Werbung:
Wie kriege ich es nun hin, dass der Slider grafisch die richtige vorgegebene Position einnimmt.
Genau so wie du es gemacht hast.
Ein Hinweis:
Javascript:
var slider = document.getElementById("myRange");
slider.value = 80;
slider.innerHTML = slider.value; //<--Diese Zeile hier

slider.oninput = function() {//<--Diese Zeile hier
  slider.innerHTML = this.value; //<--Diese Zeile hier
}//<--Diese Zeile hier
Das hier ist obsolete. Dazu benutzt man (wie du schon richtig gemacht hast) value =.

Ich habe schon zig Varianten ausprobiert aber immer wieder das Problem das die Ausgangsposition des Schiebers nicht korrekt ist.
Es ist nicht möglich, das dein Code, genau so wie du ihn jetzt reingeschickt hast, nicht funktioniert.
Schau einmal nach, ob du dein JavaScript am ENDE deines body tags eingefügt hast.
Das es so funktioniert zeigt mein Fiddle:

Und so wäre es falsch und funktioniert nicht:
 
Zurück
Oben