如何使用带十进制值的 Primefaces 滑块组件？答案

【问题标题】：How to use Primefaces slider component with decimal values?如何使用带十进制值的 Primefaces 滑块组件？
【发布时间】：2013-11-06 20:07:44
【问题描述】：

我正在使用JSF 2.2、Primefaces 4.0，并且我正在使用来自Primefaces 的slider 组件。

<p:slider displayTemplate="Between {min} and {max}" minValue="20" maxValue="40" step="1"/>

我想问你是否有可能将step 作为decimal 值。例如。 step="0.1"，或者关于如何解决这个问题的一些想法。

我已经尝试过，但我收到如下错误：

javax.el.ELException: Cannot convert 0.1 of type class java.lang.String to int] with root cause

谢谢。

【问题讨论】：

根据 PrimeFaces 文档，step 必须是整数。为什么不将您的 minValue 转换为 200 并将 maxValue 转换为 400 并在它们之间使用 1 的步长。然后当您准备好使用或显示该值时，将其除以 10。

标签： jsf-2 primefaces

【解决方案1】：

由于大多数 primefaces 小部件都基于 Jquery UI 小部件，因此请从 <p:slider> 中删除 step 属性并使用 Jquery 传递它

<p:slider id="slder" displayTemplate="Between {min} and {max}" minValue="20" 
          maxValue="40" />

脚本来操作这个

       $(window).load(function(){  // should be  $(window).load to load widget
            $('#slder').slider({
                   step: 0.1
                  });
        });

注意：这个技巧适用于任何基于 Primefaces 的小部件 Jquery UI 小部件

【讨论】：

如果您只需要滑块，则此方法有效。如果您还需要 p:slider 提供的相关文本输入字段，则需要做更多工作（使文本字段显示并接受小数分隔符，使小数分隔符可配置为 I18N）。到那时，基于 JQuery UI 从头开始编写 JSF 组件可能会更容易。