PrimeFaces滑块 - 选定区域

Question

我在使用PrimeFaces滑块组件时尝试制作彩色选区。所以我要做的是，当用户将滑块值设置为某个值时，所选值将从0变为选定值（查看图像）。

我知道PF正在使用jQuery ui，我们可以在$("#slider").slider({range: "min"});之类的jQuery中实现这一点，然后定义像.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;
}