Question

我在社交环境中有输入滑块，许多人可以在同一个滑块上输入。

我已将初始位置设置为中间，表示用户尚未输入任何内容。当用户输入他们的值时，我想同时显示他们的输入值和所有输入值的平均值。

我可以保存所有值并显示平均值，但我想显示两个拇指而不是平均值。

我正在使用引导程序自定义范围。 avgValue 是在从另一个函数获取 ajax 数据后计算的。其实这个函数是在获取ajax数据的函数内部调用的，最后传入html变量与整篇文章一起展示。

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 是一个数组，其中包含每个值的对象以及输入该值的用户的 ID。

{
    "_id": user._id,
    "value": value
}

设置值并保存在mongodb中的函数在这里

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);
}

除了引导自定义范围之外，我是否需要使用其他类型的范围滑块，或者可以根据我的需要进行修改吗？如何添加带有用户实际值的第二个拇指并将其与平均值一起显示？

在范围滑块中显示两个值

0 个答案: