Schieberegler - Prozent positiv und negativ in 5-er Schritten

Question

Guten Abend :)
ich benötige in meinem Fragebogen einen Schieberegler, der von -100 % bis + 100% anzeigt. Das habe ich entsprechend schon. Nun möchte ich ergänzen, dass nicht alle Zahlen einzeln sondern lediglich in 5-er Schritten gewählt werden kann also: -5%; +5%; -10%; +10% usw.
Folgenden Code habe ich bereits eingefügt:

var formatter = function(value) {
  if (value < 0) return "";
  var text = ((value - 51) / 50 * 100).toFixed(0) + "%";
  if (value > 51) {
    text = "+" + text;
  }
  return text;
}
SoSciSliders.setFormat(formatter);

Was muss ich ergänzen, damit die Prozentwerte in 5-er Schritten ausgewählt werden können?

Vielen Dank bereits im Voraus!

Answer 1

Was muss ich ergänzen, damit die Prozentwerte in 5-er Schritten ausgewählt werden können?

Sie sollten die "Differenzierung" in der Frage so anpassen, dass Sie die passende Anzahl Schritte haben, sonst ärgern Sie sich in der Auswertung. Ich komme auf -100% bis -5% = 20 Schritte, rechts dasselbe und dann noch die 0, macht also eine Differenzierung von 1 bis 41.

Und die Formel wäre dann entsprehend:

var text = ((value - 21) / 20 * 100).toFixed(0) + "%";

Gut die Division/Multiplikation können wir noch vereinfachen, dann ist auch klar, wo die 5 herkommt:

var text = ((value - 21) * 5).toFixed(0) + "%";

Jetzt wollen wir aber nur die ganzen/gerundeten Werte nehmen, das bekommen wir, indem wir ein Math.round direkt auf das value anwenden

var text = ((Math.round(value) - 21) * 5).toFixed(0) + "%";

Wenn Ihnen das Plus jetzt noch wichtig wäre...

var text = ((Math.round(value) - 21) * 5).toFixed(0) + "%";
if (value > 21) {
    text = "+" + text;
}

Comments

Ersteinmal DANKE für die Schritt für Schritt Erklärung.
Das mit den 5-er Schritten funktioniert jetzt.
Allerdings zeigt mir der Regler bei Nutzung des Codes Antwortmöglichkeiten von +-100% bis +400% an.


var formatter = function(value) {
  if (value < 0) return "";
  var text = ((Math.round(value) - 21) * 5).toFixed(0) + "%";
  if (value > 0) {
    text = "+" + text;
  }
  return text;
}
SoSciSliders.setFormat(formatter);

---

> Allerdings zeigt mir der Regler bei Nutzung des Codes Antwortmöglichkeiten von +-100% bis +400% an.

Haben Sie die Differenzierung (direkt in der Frage) von 101 auf 41 reduziert, wie oben beschrieben?

---

DAS war der Fehler jetzt funktioniert es. VIELEN DANK!!!!
Nur zeigt er jetzt mit dem Code bei allen Zahlen ein positives Vorzeichen an, also auch bei den Zahlen im Minus ist dann ein Minus und ein Plus.
Kann man das noch umstellen?
Das Plus vor den positiven Antworten ist wichtig da es sich um ein Gehaltsplus oder Gehaltsminus handelt. Damit wäre es dann perfekt!

---

Um nur einseitig also bei allen Antwortmöglichkeiten von 5%-100% ein positives Vorzeichen zu haben habe ich den Code wie folgt angepasst:

var formatter = function(value) {
  if (value < 0) return "";
  var text = ((Math.round(value) - 21) * 5).toFixed(0) + "%";
  if (value >= 21) {
    text = "+" + text;
  }
  return text;
}
SoSciSliders.setFormat(formatter);

Leider wird mir dann die Auswahlmöglichkeit 0% zweimal angezeigt und zwar komplett ohne Vorzeichen und mit einem Plus. Wie kann man das anpassen?

---

Ja, stimmt, da war meine Empfehlung von oben falsch. Ich passe das gleich noch an oben.

Damit das 0 nicht "wackelt", runden Sie den Wert vor dem Vergleich:

  if (Math.round(value) >= 21) {
    text = "+" + text;
  }

Sie können die 0 natürlich auch ohne Vorzeichen anzeigen. Lassen Sie dafür das = weg.

  if (Math.round(value) > 21) {
    text = "+" + text;
  }

---

Vielen lieben Dank für den schnellen und ausführlichen Support!!!! :)