RichFaces <rich:inputNumberSlider>17 Mar 2025 | 阅读 2 分钟 它提供一个滑块来更改数值。它用于通过从滑块的范围中选择来选择数值。 我们可以通过设置最小值和最大值来指定范围。默认情况下，最小值设置为 0，最大值设置为 100。滑块标有最小和最大边界值，并且在滑动滑块时会显示一个工具提示，显示当前值。 样式类和皮肤参数下表包含 inputNumberSlider 的样式类（选择器）和相应的皮肤参数。 | Class | 函数 | 皮肤参数 | 映射的 CSS 属性 |
|---|
| .rf-insl | 它用于定义数字滑块本身的样式。 | 无皮肤参数。 | | | .rf-insl-trc | 它用于定义数字滑块轨道的样式。 | controlBackgroundColor panelBorderColor | background-color border-bottom-color | | .rf-insl-trc-cntr | 它用于定义数字滑块轨道的容器的样式。 | 无皮肤参数。 | | | .rf-insl-mn | 它用于定义数字滑块上的最小标签的样式。 | generalSizeFont generalFamilyFont | 字体大小 字体系列 | | .rf-insl-mx | 它用于定义数字滑块上的最大标签的样式。 | generalFamilyFont generalTextColor | font-family color | | .rf-insl-inp | 它用于定义数字滑块上输入字段的样式。 | generalFamilyFont generalTextColor | font-family color | | .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 | 字体大小 字体系列 |
示例在这里，在下面的示例中，我们正在实现 <rich:inputNumberSlider> 组件。此示例包含以下文件。 JSF 文件// input-number-slider.xhtml 输出  滑动滑块后，输入值已更改。 
| 
Python
Java
JavaScript
SQL
C
C++
HTML
CSS
React
Node.js
Spring Boot
C#
PHP
MySQL
MongoDB
AI
ML
DSA
DBMS
OS
Aptitude
Reasoning