p：不顯示滑塊

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豆（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的魔法）

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

這應該解決您的問題。