Fancy inputsliders through declarative component

In one of our portals the user can use inputsliders to select different values. We made a fancy inputslider that shows not only a label, but also the minimum value and the maximum value allowed.
Next to the slider we have an inputText where the user can decide to type in the value, on this inputText we have a validator that also checks the min an max value.
The result looks like this:

The declarative component has 4 attributes: minval, maxval, value and label.
The code in the component definition is as followed:

The minvalue and maxvalue attributes are used for the labels, the minimum and maximum attribute on the inputNumberSlider and the validator on the inputText. The label attribute is used as label on the panelLabelAndMessage and the value attribute is used as value for the inputNumberSlider.

To illustrate an example of you easy it is to now use this declarative component I created a bean with five properties:
  public SliderBean()
    lowpoint = 1;
    minval = 25;
    maxval = 75;
    highpoint = 100;
    value = 50;

There are 3 sliders based on this properties, the first one to select the minimum value, the second one to select the maximum value and the last one to select a value.
It is very easy to create a slider based on this declarative component, all the code you need for 3 sliders is this:


Off course the page / sliders still need skinning, but you can look and play around with this example.

No comments:

Post a Comment