Slidebar mit Html erstellen

[drachenschnitzel]

Hallo,

ich würde gerne mit html einen Slidebar erstellen.
Meine bisherige Lösung sieht folgend aus:

<span id="range">0</span>
<br>
<input min="0" max="50" value="0" step="5"
onchange="showValue(this.value)" type="range">
<script type="text/javascript">
function showValue(newValue)
{
document.getElementById("range").innerHTML=newValue;
}
</script>



Nun würde ich aber gerne noch ein paar Funktionen hinzufügen.
1. Der Werte, welchen ich mit dem Slidebar einstelle, soll in ein Feld geschrieben werden, welches ich auch durch die Eingabe der Tastatur ändern kann. Wenn ich den Wert mit der Tastatur ändere soll der Regler des Slidebars an dieses Stelle springen.


Danke vorab!

 

[LeCub]

Mach einfach aus dem <span> Element ein <input type="text"> und lese beim onchange von diesem den Inhalt ab und übertrage ihn auf den slider

 

[SpiceLab]

In meinen Bookmarks ausgegraben: http://jsfiddle.net/C8X4D/

Nutzt zwar jQuery, sollte aber die grundsätzliche Vorgehensweise verdeutlichen.