p：スライダが表示されない

Question

2つの異なる色のスライダを表示しようとしています（カーソルの左側に赤色、右側に緑色）PrimeFaces slider - colored selected regionのスライダを表示しようとしています。私はあなたには、いくつかのJavaScriptの魔法を追加する必要がありますことを熟練にトリッキーな1、だ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

を書くよう。

これが解決策です。

ファイルを.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" 
    }); 
} 

これはあなたの問題を解決するはずです。