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; 
}