PrimeFaces滑塊 - 顏色選定的區域

Question

我想使用PrimeFaces滑塊組件時，使顏色的選擇區域。所以我想要做的是，當用戶設置滑動值的東西，選定的值從0到選定的值（看圖像）着色。

我知道，PF使用jQuery UI的，我們可以做到這一點jQuery的像$("#slider").slider({range: "min"});，然後定義像.ui-slider-range{background: green;}背景顏色。

我該如何管理這個連接PF組件滑塊？這甚至有可能嗎？什麼是完成這個最好的方法？

謝謝。

Answer 1

如果不使用JavaScript，您可以嘗試將滑塊範圍屬性設置爲true以顯示兩個手柄，並通過css隱藏第一個手柄。

你可以試試：

<p:slider range="true" for="zeroValue,sliderValue" styleClass="your-style-class"/> 

<h:inputHidden id="zeroValue" value="0"/> 
<h:inputHidden id="sliderValue"/> 

CSS

.your-style-class span:nth-of-type(1) { 
    display: none; 
}