PrimeFaces 滑块

17 Mar 2025 | 阅读 2 分钟

它是一个带有滑块的文本输入框。它用于借助滑块获取用户输入。它允许我们使用滑块来增加和减少输入值。<p:slider> 组件用于创建滑块输入文本。它还具有各种属性，如下表所示。

滑块属性

属性	默认值	类型	描述
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 文件

// slider.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="#{slider.value}" />
<p:slider for="user-name" />
</h:panelGrid>
<br/>
<p:commandButton value="Submit" />
</h:form>
</h:body>
</html>

ManagedBean

// Slider.java

package com.javatpoint;
import javax.faces.bean.ManagedBean;
@ManagedBean
public class Slider {
private int value;
public int getValue() {
return value;
}
public void setValue(int value) {
this.value = value;
}
}

输出

下一个主题PrimeFaces InputSwitch

← 上一个下一个 →

PrimeFaces 滑块

滑块属性

示例

JSF 文件

ManagedBean

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

PrimeFaces 教程

PrimeFaces Ajax

UI 组件

面试题

PrimeFaces 滑块

滑块属性

示例

JSF 文件

ManagedBean

相关帖子

PF Inplace

PF Steps

PF Signature

PF Editor

PF Tooltip

PF ColorPicker

PF CommandButton

PF BooleanCheckbox

PF BooleanButton

PF Password

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器