Customize the Vaadin Slider

I’d like to customize the data showed by the slider. For example instead of showing a number it should say “prefix” + number + “suffix”, also this value should always be visible.

In the class VSlider I have found the method public void setFeedbackValue(double value). I suspect this is where the values showed by the slider is configured. I have tried to copy the class in my own project with the same package structure and I’ve also recompiled the widgetset but the changes aren’t showed in the view. I’m new to creating client side code for Vaadin so there might be something that I didn’t understand correctly.


Questions:

Do you have any suggetions on how I could implement what I want?

Do you know why copying the VSlider class and changing it didn’t work?

Thanks

Hi,

since the setFeedbackValue method is public, you could just create a class, e.g. VCustomSlider, which would extend VSlider and within this class you would override the setFeedbackValue method to do what you want. After this is done, just modify your project’s widgetset definition file (the .gwt.xml file) to do some deferred binding:

<replace-with class="com.your.project.client.ui.VCustomSlider">
<when-type-is class="com.vaadin.client.ui.VSlider"/>
</replace-with>

If you need to send the prefix and suffix from the server-side (instead of hardcoding it in the client-side code) things get a bit more complicated, you’d need e.g. some fields in a shared state.

I think you could also do this as a component extension, which would just call the setFeedbackValue method of the VSlider widget.

-tepi

I ended up creating a new slider by copying the classes from the Vaadin framework related to the Slider e.g. Slider, VSlider and SliderConnector.
Then I could change the code in VSlider however I wanted.

Thanks tepi for your suggestions. Because the method I wanted to change was private and final I couldn’t use your suggestion using “<replace-with”. As for extending the component I found that to be too complicated for what I wanted to achieve. Overall your suggestions were of great value. Thanks

Ok, good that you got the end result you wanted :). Unfortunately the situation with many client-side classes is such that you need to do some copy-pasting in order to get some changes done. Hopefully this will be improved in the future.