Verbleibende Werte bei einem Slider ausgeben

Question

Hallo zusammen, ich habe ich meiner Umfrage vier Slider eingebunden. Die Slider sind miteinander verbunden, sodass insgesamt ein Wert von 100 nicht überschritten werden darf.

Ich würde den Respondenten gerne zeigen, wie viel „Budget“ ihnen noch verbleibt.

Ich müsste also letztendlich die Werte alle Slider addieren, vom zur Verfügung stehenden Wert abziehen und das Ganze ausgeben.

Bin leider überhaupt nicht fit in Javascript. Kennt jemand eine Lösung, wie man das umsetzen kann?

Edit:
Ich habe versucht diesen Code aus dem Forum anzuwenden / an meine Survey anzupassen:
Leider bekomme ich in meiner HTML Box nur einen Wert ausgegeben, wenn einer der Slider auf 100 steht. Was übersehe ich?

var formatter = function(value, reversed) {

if (value < 0) return "";
return String(Math.round((value-1)*10)) + " $";
}
SoSciSliders.setFormat(formatter);

var sliders_id = ["RQ19_01",

                "RQ19_02", 
                "RQ19_03",
                "RQ19_04",
                ];  // Liste der Slider erstellen

var sliders = [];
function getsliders() {

for (var i=0; i<sliders_id.length; i++) 
{sliders.push(SoSciSliders.getSlider(sliders_id[i]));}}

var wert = 0;

window.addEventListener("load", function() {

getsliders();  
console.log(sliders);

// Event-Handler aktivieren
for (var i=0; i<sliders.length; i++) {
  sliders[i].addEventListener("change", function() {

     for (var j=0; j<sliders.length; j++) {
       
    if (Math.round(sliders[j].getValue()) == 11) {
        console.log("11");
        wert = wert+1;
      }
    } 
    console.log(wert);
    document.getElementById("info01").innerHTML = String(wert*10);
    wert = 0;
  });
}

});

Answer 1

Edit:
Habe es dank chatGPT selbst gelöst bekommen.

Für den einen oder anderen kann es vielleicht hilfreich sein. Ich hätte die Hilfe gut gebrauchen und mir einige chatGPT Prompts gespart, da ich 0 Ahnung von JS habe. Deshalb hier mein Lösungsweg einmal geteilt (mit Sicherheit nicht perfekt aber funktioniert):

1. Ich habe in die "Instructions" der Frage die Ausgabe für das (in meinem Fall) verbleibende Budget eingefügt. https://i.imgur.com/Fvurfla.png

1. Custom Code Javascript. https://i.imgur.com/CRBDZi4.png

1. Vorschau. https://i.imgur.com/n1jarkK.png

1. Zum Schluss habe ich die Fragen auf einer einzelnen Seite ausgegeben. In meinem Fall brauchte ich diese Funktionalität drei Mal. https://i.imgur.com/5hfPwwO.png

Der Code:

    var formatter = function(value, reversed) {
  if (value < 0) return "";
  return "$ " + String(Math.round((value-1)*10));
};
SoSciSliders.setFormat(formatter);

var sliders_id = ["RQ13_01", "RQ13_02", "RQ13_03"];
var sliders = [];

function getSliders() {
  for (var i=0; i<sliders_id.length; i++) {
    sliders.push(SoSciSliders.getSlider(sliders_id[i]));
  }
}

var remaining_budget = 100;
var remaining_el = document.getElementById("info01_people");
var budget_status_el = document.getElementById("info02_people");

function updateRemainingBudget() {
  var total_spent = 0;

  for (var j=0; j<sliders.length; j++) {
    var value = (Math.round(sliders[j].getValue() - 1) * 10);

    if (value > 0) {
      total_spent += value;
    }
  }

  var remaining = remaining_budget - total_spent;
  remaining_el.innerHTML = "$ " + (remaining > 0 ? String(remaining) : "0");
  budget_status_el.style.color = (remaining >= 60 ? "green" : remaining >= 10 ? "orange" : remaining === 0 ? "red" : "black");
}

window.addEventListener("load", function() {
  getSliders();
  console.log(sliders);

  for (var i=0; i<sliders.length; i++) {
    sliders[i].addEventListener("change", updateRemainingBudget);
  }

  updateRemainingBudget();
});