PrimeFaces滑块-彩色选定区域 [英] PrimeFaces slider - colored selected region

问题描述

当我使用PrimeFaces滑块组件时，我试图制作彩色选择区域.所以我想做的是，当用户将滑块值设置为某种值时，所选值的颜色从0变为所选值(查看图像).

I'm trying to make colored selection region when using PrimeFaces slider component. So what i'm trying to do is, when user set slider value to something, selected value is colored from 0 to chosen value (look at image).

我知道PF使用的是jQuery ui，我们可以像$("#slider").slider({range: "min"});这样在jQuery中实现这一点，然后定义.ui-slider-range{background: green;}这样的背景色.

I know that PF are using jQuery ui and we can make this happen in jQuery like $("#slider").slider({range: "min"}); and then define background color like .ui-slider-range{background: green;}.

我该如何管理PF组件滑块?这有可能吗?最好的方法是什么?

How can i manage this whith PF component slider? is this even possible? and what's the best way to accomplish this?

谢谢.

推荐答案

不使用javascript，您可以尝试将slider range属性设置为true以显示两个手柄，而不是通过CSS隐藏第一个手柄.

Without using javascript you can try to set the slider range attribute to true to display the two handles and than hide the first one via 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;
}

这篇关于PrimeFaces滑块-彩色选定区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！