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