Please disable your adblock and script blockers to view this page

Search this blog

Showing posts with label Range. Show all posts
Showing posts with label Range. Show all posts

Friday 13 September 2013

Using af:inputNumberSlider and af:inputRangeSlider for good UI in Oracle ADF

Hello All,
This tutorial is about slider component
Slider is cool and interesting component in ADF to select a single number or to select a range
there is two types of slider available in ADF Faces

1. af:inputNumberSlider (to select single value)
2. af:inputRangeSlider (to select range)

Follow steps to learn how to use slider in ADF
  • Go to Component Palette and search slider and drop it  into page
  • look in property inspector of slider , there are many properties to customise this component, you can change min-max values,orientation etc

  •  See Horizontal and Vertical slider-

  • Now to get its value in bean , bind both slider to managed bean, using binding property

  •     private RichInputNumberSlider numberSliderBind;
        private RichInputRangeSlider rangeSliderBind;
        public void setNumberSliderBind(RichInputNumberSlider numberSliderBind) {
            this.numberSliderBind = numberSliderBind;
        public RichInputNumberSlider getNumberSliderBind() {
            return numberSliderBind;
        public void setRangeSliderBind(RichInputRangeSlider rangeSliderBind) {
            this.rangeSliderBind = rangeSliderBind;
        public RichInputRangeSlider getRangeSliderBind() {
            return rangeSliderBind;

  • now to get value of inputNumberSlider simply use binding.getValue()

  •  Number numberVal = (Number)numberSliderBind.getValue();

  • To get Range of inputRangeSlider use this

  •         NumberRange sliderVal = (NumberRange)getRangeSliderBind().getValue();
            Number minVal=sliderVal.getMinimum();
            Number maxVal=sliderVal.getMaximum();

  • Now Run your page and see how is it-
You can use slider for custom search, fixed range interval etc