Home > Development > Custom Styling rich:inputNumberSlider of RichFaces

Custom Styling rich:inputNumberSlider of RichFaces

The default look and feel of arrows of rich:inputNumberSlider in RichFaces is not very great (May be they did it intentionally for the users to customize it).

The following CSS styles have to be overridden.

rich-inslider-inc-horizontal, rich-inslider-inc-horizontal-selected

rich-inslider-dec-horizontal, rich-inslider-dec-horizontal-selected

rich-inslider-handler, rich-inslider-handler-selected

As an example, I have provided my styles below.


.rich-inslider-inc-horizontal,.rich-inslider-inc-horizontal-selected {
 background-image:url("/img/rightarrow.png");
}

.rich-inslider-dec-horizontal,.rich-inslider-dec-horizontal-selected{
 background-image:url("/img/leftarrow.png");
}

.rich-inslider-handler,.rich-inslider-handler-selected{
 background-image:url("/img/sliderpos.png");
 width:16px;
 height:16px;
}
  • Share/Bookmark
Categories: Development Tags:
  1. No comments yet.
  1. No trackbacks yet.