CODEWITHSUNDEEP
primefacesslider
Jean
Jean

Reputation: 621

p:slider not displaying

I 'm trying to display a slider with two different colours (red on the left of the cursor, green on the right. I followed the advices I read on that question PrimeFaces slider - colored selected region but my slider disappear as soon as I write range ="true"

Any idea of how I could fix this ?

<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}" />

Upvotes: 1

Views: 794

Answers (1)

JokerTheFourth
JokerTheFourth

Reputation: 425

That's a tricky one, to accomplished that you will need to add some JavaScript magic.

Here is the solution.

.xhtml file

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

.xhtml file (slider)

<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 file (JavaScript magic)

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

This should solve your problem.

Upvotes: 1

Related Questions