PrimeFaces slider用法

本文概述

滑块属性
例子

【PrimeFaces slider用法】它是带有滑块的文本输入。它用于在滑块的帮助下获得用户输入。它允许我们使用滑块增加和减少输入。 < p：slider> 组件用于创建滑块输入文本。它还具有下表列出的各种属性。
滑块属性

Attribute	Default value	Type	Description
minValue	0	Integer	用于设置滑块的最小值。
maxValue	100	Integer	用于设置滑块的最大值。
style	null	String	它用于设置容器元素的内联CSS。
animate	true	Boolean	它需要布尔值来设置启用或禁用动画功能。
type	horizontal	String	用于设置滑块的类型。无论是水平还是垂直。
step	1	Integer	用于设置滑块的步骤。
disabled	0	Boolean	用于禁用滑块。它需要布尔值。
onSlideStart	null	String	它用于在滑块启动事件上调用客户端脚本。
onSlideEnd	null	String	它在幻灯片末尾执行客户端脚本。
range	false	Boolean	它用于提供范围。
displayTemplate	null	String	这是一个字符串模板。

例子在下面的示例中, 我们正在实现< p：slider> 组件。本示例包含以下文件。
JSF文件
// slide.xhtml

< ?xml version='1.0' encoding='UTF-8' ?> < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> < html xmlns="http://www.w3.org/1999/xhtml"xmlns:h="http://xmlns.jcp.org/jsf/html"xmlns:p="http://primefaces.org/ui"> < h:head> < title> Input Slider< /title> < /h:head> < h:body> < h:form> < p:growl id="growl" showDetail="true" /> < h3 style="margin-top: 0"> PrimeFaces InputText Slider< /h3> < h:panelGrid columns="1" style="margin-bottom: 10px"> < p:inputText id="user-name" value="http://www.srcmini.com/#{slider.value}" /> < p:slider for="user-name" /> < /h:panelGrid> < br/> < p:commandButton value="http://www.srcmini.com/Submit" /> < /h:form> < /h:body> < /html>

ManagedBean
// Slider.java

package com.srcmini; import javax.faces.bean.ManagedBean; @ManagedBeanpublic class Slider {private int value; public int getValue() {return value; }public void setValue(int value) {this.value = http://www.srcmini.com/value; }}

输出