I have input sliders in social context where many people can input to the same slider.
I have set the initial position to be in the middle signifying that the user hasn't input anything. And when the user inputs their value I want to show both their input value and the average of all the input values.
I'm able to save all values and show the average but I want to show two thumbs instead of just the average.
I'm using the bootstrap custom range. The avgValue is calculated after getting ajax data from another function. Actually this function is called inside the function that gets ajax data and at the end html variable is passed to be displayed with the whole article.
function showValues(data) {
var html = "", edit = false, avgValue = 50;
for (let i = 0; i < data.values.length; i++) {
var value = data.values[i];
avgValue += Number(value.value)/data.value.length;
if (values._id == window.user._id){edit = true};
// //set second thumb to show value
}
html += '<span class="" onclick="setValue(this);" data-id="' + data._id + '">';
html += '<input type="range" class="custom-range" id="customRange" value="' + avgValue + '" />';
html += '</span>';
return html;
}
data.values is an array with objects for each value along with the id of the user who has input the value.
{
"_id": user._id,
"value": value
}
The function that sets the value and saves it in monogodb is here
function setValue(self) {
var _id = self.getAttribute("data-id");
var value = self.childNodes[0].value;
var ajax = new XMLHttpRequest();
ajax.open("POST", "/setValue", true);
ajax.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// var response = JSON.parse(this.responseText);
// //set second thumb to show value
}
};
var formData = new FormData();
formData.append("accessToken", localStorage.getItem("accessToken"));
formData.append("_id", _id);
formData.append("value", value);
ajax.send(formData);
}
Do I need to use some other kind of range slider other than bootstrap custom range or can this be modified to my needs? How do I add a second thumb with user's actual value and show it alongwith the average?
