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

Sharing is Caring

Hello All,
This tutorial is about slider component (af:inputNumberSlider,af:inputRangeSlider)
The slider is a cool and interesting component in ADF to select a single number or to select a range
there are 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 the slider in ADF

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

 

  •  See Horizontal and Vertical slider-
af:inputNumberSlider

 

  • Now to get its value in the bean, bind both sliders to the 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 the slider for custom search, fixed range interval etc

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *