Primefaces p：滑块不显示

我试图用两种不同的颜色显示一个滑块（光标左侧为红色，右侧为绿色）。我遵循了我在该问题上读到的建议，但我的滑块在写入

range=“true”

你知道我该怎么解决这个问题吗

<h:panelGrid columns="1" style="margin-bottom: 10px">
<h:outputText id="outp"  />                                                 value="#{Student.avgMarks}€" />
<h:inputHidden id="test" value="#{Student.avgMarks}" />
<h:inputHidden id="zeroValue" value="0" />
<h:inputHidden id="sliderValue" value="100" />
<p:slider for="zeroValue,test" range="true" style=" width: 150px; background-color: #444450; font-size: x-small; " display="outp" displayTemplate="{value}" />

value=“#{Student.avgMarks}€”/>

---

这是一个棘手的问题，要实现这一点，您需要添加一些JavaScript魔术

这是解决办法

.xhtml文件

<f:metadata>
    <f:event type="preRenderView"
                   listener="#testBean.refreshCustomSlider" />
</f:metadata>

.xhtml文件（滑块）

.javabean（testBean）-@SessionScoped

public void refreshCustomSlider() {
    ArrayList<String> listId = new ArrayList<>();
    listId.addAll(Arrays.asList("FRMtest:sliderAmount", "", "")); //you can add more sliders id here if you want
    callFunction(listId);
}

private static final String function = "customSlider";

public static void callFunction(List<String> listId) {
    String call = function + "(['";
    for (int i = 0; i < listId.size(); i++) {
        if (i + 1 == listId.size()) {
            call += listId.get(i) + "'])";
        } else {
            call += listId.get(i) + "','";
        }
    }
    RequestContext.getCurrentInstance().execute(call);
}

public void refreshCustomSlider（）{
ArrayList listId=新的ArrayList（）；
listId.addAll（Arrays.asList（“FRMtest:sliderAmount”、“”、“”）；//如果需要，可以在此处添加更多滑块id
调用函数（listId）；
}
私有静态最终字符串函数=“customSlider”；
公共静态void调用函数（列表列表ID）{
字符串调用=函数+”（[”；
对于（int i=0；i

.js文件（JavaScript魔术）

功能自定义滑块（id）{
对于（i=0；i

这应该能解决你的问题

public void refreshCustomSlider() {
    ArrayList<String> listId = new ArrayList<>();
    listId.addAll(Arrays.asList("FRMtest:sliderAmount", "", "")); //you can add more sliders id here if you want
    callFunction(listId);
}

private static final String function = "customSlider";

public static void callFunction(List<String> listId) {
    String call = function + "(['";
    for (int i = 0; i < listId.size(); i++) {
        if (i + 1 == listId.size()) {
            call += listId.get(i) + "'])";
        } else {
            call += listId.get(i) + "','";
        }
    }
    RequestContext.getCurrentInstance().execute(call);
}

function customSlider(id) {
for (i = 0; i < id.length; i++) {
    var s = document.getElementById(id[i]);
    jQuery(s).slider({
        range: "min"
    });
}