Create a JSF Slider in 5 minutes

There might be cases where it’d be cool to make users enter the values of an JSF inputtext using a slider. One possible way to do this is to create a custom JSF component and render the javascript but this is hard to create, test and maintain. On the otherhand thanks to the best jsf viewhandler Facelets, it’s sooo easy. Actually I’ve created this example to demonstrate how it’s easy to do stuff like this.

Here’s the slider.xhtml built on top of the cool scriptaculous slider widget;

<ui:composition>     <t:inputText id=”#{id}” style=”width:100px” value=”#{value}” forceId=”true”></t:inputText>     <div id=”#{id}_track_id” style=”width:105px;background-color:#aaa;height:5px;”>         <div id=”#{id}_handle_id” style=”width:5px;height:10px;background-color:#f00;cursor:move;”></div>     </div>     <script type=”text/javascript”> //some scriptaculous script here          var slider_#{id} = new Control.Slider(‘#{id}_handle_id’,'#{id}_track_id’, {range:$R(#{minimum},#{maximum})});                       slider_#{id}.options.onSlide = function(value){                                            $(‘#{id}’).value = (value + ”).split(“.”)[0];         };     </script> </ui:composition>

After declaring slider tag in your facelets-taglib file, it’s all set and ready to use as;

<barca:slider id=”ageSlider” value=”#{CustomerCreate.customer.age}” minimum=”18″ maximum=”50″></barca:slider>

How it looks

Scriptaculous slider’s lookandfeel can be changed using the css attributes so it’s possible to make it look cooler like a swing slider. But that’s not the point, the thing is with facelets, I don’t think there is so much need to write custom JSF components with java because it’s obvious that with facelets composition infrastructure creating composition components or fancy rich components like this slider is almost a no-brainer.