Werte von Schieberegler auf selber Seite anzeigen

Question

Ich würde gerne einen Schieberegler von 0-10 verwenden. Es soll aber extra angezeigt werden wie viel man gewählt hat (das geht bereits über den Schieberegler) und wie viel übrig ist, aber z.B. verdoppelt (geht soweit ich das sehen kann nicht über den Regler).

Wählt man beispielsweise 3 aus, soll einmal 3 angezeigt werden und daneben 14, weil 2x(10-3).

Ich habe zwar gefunden dass man dafür Java Code benutzen muss, weiß aber nicht wie.

Vielen Dank im voraus

Answer 1

Sie können die Anzeige mit ein wenig JavaScript nach Belieben anpassen - und wenn Computer etwas können, dann ist es rechnen :)

<script type="text/javascript">
<!--
formatter = function(value, reversed) {
  if (value < 0) return "";
  return String(Math.round(value)) + String(2 * (10 - Math.round(value)));
}
SoSciSliders.setFormat(formatter);
// -->
</script>

Comments

Danke für die schnelle Antwort. Diese Option habe ich bereits gefunden und angewendet. Ich würde die Werte aber gerne in einem Text unabhängig vom Regler anzeigen. Wie kann ich die errechneten Werte z.B. in einem Textfeld auf der selben Seite anzeigen?
Sorry, dass ich das nicht klar genug formuliert habe.

---

> Ich würde die Werte aber gerne in einem Text unabhängig vom Regler anzeigen.

Dann hatte ich die Frage falsch verstanden.

Sie können den Wert des Reglers wie folgt ermitteln:

var slider =  SoSciSliders.getSlider("AB01_01");
var wert = slider.value;

Und wenn Sie nun in Ihrem HTML-Code oder in einer Frage irgendwo ein <span id="info01">---</span> eingebunden haben, dann könnten Sie den Text wie folgt dort hineinschreiben:

document.getElementById("info01").innerHTML = String(Math.round(wert)) + String(2 * (10 - Math.round(wert)));

Das ganze nochmal am Stück:

var slider =  SoSciSliders.getSlider("AB01_01");
slider.addEventListener("click", function() {
  var wert = slider.value;
  document.getElementById("info01").innerHTML = String(Math.round(wert)) + String(2 * (10 - Math.round(wert)));
});

Falls der Text erst auf der folgenden Seite kommt, geht es mit Platzhalter natürlich noch viel einfacher, weil Sie den Wert dann einfach per value() im PHP-Code bestimmen können.

---

Funktioniert einwandfrei, besten Dank!