Schieberegler mit definiertem Minimum und Maximum und in 0,01€ Schritten

Question

Lieber Support,

ich würde gerne einen Schieberegler verwenden, der bei 1,99€ anfängt und bis 9,99€ geht und dabei in 0,01€ Schritten der Preis eingestellt werden kann. Leider klappt das bei mir aber nicht. Könntet ihr mir vielleicht weiterhelfen und sagen, wie ich das mache?

Danke schon mal und viele Grüße

Comments

was genau klappt denn nicht?

---

var formatter = function(value, reversed) {
  // Nichts anzeigen, wenn ein Wert kleiner 0 (z.B. -9 = keine Antwort) vorliegt
  if (value < 0) return "";
  // Den Wert von 1-101 auf 0-100 transformieren (minus 1) und runden mittels Math.round(),
  // dann auf den Bereich 0-1 (dividiert durch 100),
  // dann auf den Bereich 0-20 (multipliziert mit 20) und
  // Zuletzt noch ein Leerzeichen und Eurozeichen ergänzen (plus " €")
  return String(Math.round((value - 1) / 100 * 9,99)) + " €";
}
SoSciSliders.setFormat(formatter);

Mit dem Code klappt es, denn Endpunkt auf 9,99€ zu definieren und die Anzeige in Euro zu haben, allerdings weiß ich nicht, wie man den Anfangspunkt auf 1,99€ setzt.

<script type="text/javascript">
<!--
formatter = function(value, reversed) {
  if (value < 0) return "";
  return (value / 100).toFixed(2) + " €";
}
SoSciSliders.setFormat(formatter);
// -->
</script>

Wenn ich den Code eingebe, um die angezeigten Abstufungen in kleineren Schritten zu haben, dann zeigt er den Schieberegler nicht mehr als kontinuierliches Strahl an, sondern wie eine Skala.

Answer 1

Von 1,99 bis 9,99 ist es eine Differenz von 8 - oder in Ihrem Fall 800 Cent/Schritte, plus 1.

Als erstes müssten Sie also im Schieberegler eine Differenzierung von 801 einstellen. Im nächsten Schritt müssen Sie dann eine Skalengrafik bauen, die auch mindestens 801 Pixel Platz bietet vom Minimum bis zum Maximum, sonst können nicht alle möglichen Werte ausgewählt werden.

Und dann müssen Sie am Ende noch 198 zu der Zahl addieren bevor Sie dividieren.

return ((value + 198) / 100).toFixed(2) + " €";

Comments

Vielen Dank schon mal!
Ich habe jetzt folgenden Code eingegeben:
var formatter = function(value, reversed) {
  // Nichts anzeigen, wenn ein Wert kleiner 0 (z.B. -9 = keine Antwort) vorliegt
  if (value < 0) return "";
  // Den Wert von 1-101 auf 0-100 transformieren (minus 1) und runden mittels Math.round(),
  // dann auf den Bereich 0-1 (dividiert durch 100),
  // dann auf den Bereich 0-20 (multipliziert mit 20) und
  // Zuletzt noch ein Leerzeichen und Eurozeichen ergänzen (plus " €")
  return String(Math.round((value - 1) / 100 * 9,99)) + " €";
}
SoSciSliders.setFormat(formatter);
SoSciSliders.setFormat(formatter);
<script type="text/javascript">
<!--
formatter = function(value, reversed) {
  if (value < 0) return "";
  return ((value + 198) / 100).toFixed(2) + " €";
}
SoSciSliders.setFormat(formatter);
// -->
</script>

Ich habe zudem bei dem "Weitere Einstellungen" Punkt "Differenzierung" 1-801 eingegeben sowie die Abmessung der Skala bei Breite auf 1000 Pixel gesetzt, aber trotzdem wird mir der Schieberegler nicht wie gewünscht angezeigt. Ich habe dann immer noch die Anzeige wie bei einer Skala mit 11 Skalenpunkten angezeigt, die jeweils dann wieder mit Prozentwerten hinterlegt sind, woran könnte das liegen?

---

Guten Abend, ich habe jetzt nochmal ein bisschen rumprobiert und den Code eingegeben:
var formatter = function(value, reversed) {
  // Nichts anzeigen, wenn ein Wert kleiner 0 (z.B. -9 = keine Antwort) vorliegt
  if (value < 0) return "";
  // Den Wert von 1-101 auf 0-100 transformieren (minus 1) und runden mittels Math.round(),
  // dann auf den Bereich 0-1 (dividiert durch 100),
  // dann auf den Bereich 0-20 (multipliziert mit 20) und
  // Zuletzt noch ein Leerzeichen und Eurozeichen ergänzen (plus " €")
  return String(Math.round((value - 1) / 801 * 8 + 1,99).toFixed(2) + " €");
}
SoSciSliders.setFormat(formatter);
<!--
formatter = function(value, reversed) {
  if (value < 0) return "";
  return (value / 100).toFixed(2).replace(".", ",") + " €";
}
SoSciSliders.setFormat(formatter);
// -->

Jetzt klappt es, dass es in Centbeträgen angezeigt wird und den theoretisch den richten Bereich hat, aber leider bekomme ich es nicht hin, dass der Anfangswert auf 1,99€ gesetzt wird, was mache ich da noch falsch?

---

> leider bekomme ich es nicht hin, dass der Anfangswert auf 1,99€ gesetzt wird, was mache ich da noch falsch?

Haben Sie es denn auch mal mit der Code-Zeile versucht, die ich in meinem obigen Kommentar empfohlen habe?

Wenn Sie lieber bei Ihrer Lösung bleiben, müssen Sie die Sezimalzahl 1,99 bitte mit einem Punkt schreiben, also 1.99

---

Ja, also ich habe jeweils einzeln diese Zeile: return String(Math.round((value - 1) / 801 * 8 + 1,99).toFixed(2) + " €"); und dann auch nochmal diese: return (value / 100).toFixed(2) durch den Code ersetzt, sobald ich den allerdings eingebe, wird der Schieberegler wieder so wie eine Skala mit einzelnen Skalenpunkten.

Wenn ich das Komma durch einen Punkt bei den 1.99 ersetzt, ändert sich bei mir leider gar nichts und der Startpunkt bleibt immer noch bei 0.

---

> sobald ich den allerdings eingebe, wird der Schieberegler wieder so wie eine Skala mit einzelnen Skalenpunkten.

Das bedeutet, dass der JavaScript-Code fehlerhaft ist und daher gar nicht mehr ausgeführt wird. Wo genau das Problem steckt, verrät Ihnen die Fehlerkonsole Ihres Browsers.

---

Ah, ja, jetzt funktioniert es, super, vielen vielen herzlichen Dank!