Slider (Range Slider) Problem Ausgangssituation des Schiebers

[ASbetebe]

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"



Mit value="50"

 

[Aaron3219]

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

Genau so wie du es gemacht hast.
Ein Hinweis:

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:

Edit fiddle - JSFiddle - Code Playground

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

jsfiddle.net

Und so wäre es falsch und funktioniert nicht:

Edit fiddle - JSFiddle - Code Playground

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

jsfiddle.net