RichFaces rich（inputNumberSlider） rich组件|RichFaces

本文概述

样式类和皮肤参数
例子

它提供了一个用于更改数值的滑块。通过从滑块的范围中选择来选择数值。
我们可以通过设置最小值和最大值来指定范围。默认情况下, 最小值设置为0, 最大值设置为100。滑块带有最小和最大边界值标记, 并且在滑动滑块时显示了显示当前值的工具提示。
样式类和皮肤参数 【RichFaces rich（inputNumberSlider）】下表包含style类(选择器)和inputNumberSlider的相应外观参数。

Class	Function	皮肤参数	映射的CSS属性
.rf-insl	它用于定义数字滑块本身的样式。	没有皮肤参数。
.rf-insl-trc	它用于定义数字滑块轨道的样式。	controlBackgroundColor面板BorderColor	background-color border-bottom-color
.rf-insl-trc-cntr	它用于为数字滑块轨道的容器定义样式。	没有皮肤参数。
.rf-insl-mn	它用于定义数字滑块上最小标签的样式。	generalSizeFont generalFontFont	font-size font-family
.rf-insl-mx	它用于定义数字滑块上最大标??签的样式。	generalFamilyFont generalTextColor	font-family color
.rf-insl-inp	它用于定义数字滑块上输入字段的样式。	generalFamilyFont generalTextColor	字体系列颜色
.rf-insl-inp-cntr	它用于为输入字段的容器定义样式。	没有皮肤参数。
.rf-insl-hnd	它用于定义数字滑块上手柄的样式。	没有皮肤参数。
.rf-insl-hnd-cntr	它用于定义手柄容器的样式。	没有皮肤参数。
.rf-insl-hnd-sel	选定后, 用于定义手柄的样式。	没有皮肤参数。
.rf-insl-hnd-dis	选定后, 用于定义手柄的样式。	没有皮肤参数。
.rf-insl-dec, .rf-insl-inc	这些类为步骤控件定义样式, 以减少和增加数量。	没有皮肤参数。
.rf-insl-dec-sel, .rf-insl-inc-sel	这些类在选择时定义了步骤控件的样式。	没有皮肤参数。
.rf-insl-dec-dis, .rf-insl-inc-dis	这些类在禁用时定义了步骤控件的样式。	没有皮肤参数。
.rf-insl-tt	它用于为数字滑块上的工具提示定义样式。	generalSizeFont generalFamilyFont	font-size font-family

例子在下面的示例中, 我们正在实现< rich：inputNumberSlider> 组件。本示例包含以下文件。
JSF文件
// input-number-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"> < ui:composition xmlns="http://www.w3.org/1999/xhtml"xmlns:h="http://java.sun.com/jsf/html"xmlns:f="http://java.sun.com/jsf/core"xmlns:ui="http://java.sun.com/jsf/facelets"xmlns:a4j="http://richfaces.org/a4j"xmlns:rich="http://richfaces.org/rich"> < f:view> < h:head> < title> Input Number Slider Example< /title> < /h:head> < h:body> < h:form> < h:outputText value="http://www.srcmini.com/Select a value from the Range"> < /h:outputText> < br/> < br/> < rich:inputNumberSlider minValue="http://www.srcmini.com/10"maxValue="http://www.srcmini.com/100"showArrows="true"showTooltip="false"step="5"> < /rich:inputNumberSlider> < /h:form> < /h:body> < /f:view> < /ui:composition>

输出