Question

我正在尝试显示两种不同颜色的滑块（光标左侧是红色，右侧是绿色。我按照我在该问题上阅读的建议PrimeFaces slider - colored selected region但是我的滑块一旦消失就会消失我写了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}" />

Answer 1

这是一个棘手的问题，要完成你需要添加一些JavaScript魔法。

这是解决方案。

.xhtml文件

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

.xhtml文件（滑块）

<p:slider id="sliderAmount"
          animate="true">
    <p:ajax global="false"
            event="slideEnd"
            listener="#testBean.onSliderZnesekEndEvent"
            update="sliderAmount"
            process="sliderAmount" />
 </p:slider>

.java bean（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);
}

.js文件（JavaScript magic）

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

这可以解决您的问题。

p：滑块未显示

1 个答案: