The GXT Slider is beautiful and fun to use, it can even be passed to a SliderField and used as an input widget in forms (FormPanel), there is however one twist to its API that I think should be looked into in GXT3 and its the fact the you have very little control over the formatting of the tooltip message shown as you drag the slider's thumb back and forth.

I tested with GXT 2.2.3 and as of this release you can only configure the tip message thus :

Slider slider = new Slider();
....
slider.setMessage("{0} inches tall");

And with this setup you get the tooltip formatted like "1 inches tall", "2 inches tall", "3 inches tall" e.t.c Internally Slider usese Format.substitute(getMessage(), value) such that the value of the slider is substituted into what has been set with setMessage() method.

If we have a Slider configured to slide from 1 to 5 and need to use it to implement, say, a rating control such that the value 1 could mean "Poor" and the value 5 could mean "Excellent", the current API prevents us from doing that except with a subclass of Slider. Having to subclass Slider just to vary the "algorithm" for formatting its tooltip is not brilliant.

I think GXT 3 needs a Slider API that can allow client code implement the formatting "algorithm" in whatever way they please just as a GridCellRenderer does with the Strategy Pattern.

We can intorduce a TipRenderer interface with a format(Slider slider, int value) method which will return a String, the Slider class can now have a default TipRenderer that is implemented with the current Format.substitute(getMessage(), value) invocation, giving us a backwards compatible but flexible API.

Bellow is a simple example I created :


public class Slider extends com.extjs.gxt.ui.client.widget.Slider {
	public interface TipRenderer{
		String format(Slider slider, int value);
	}

	protected TipRenderer tipRenderer;		
	
	public Slider() {
		super();		
		tipRenderer = new TipRenderer() {			
			@Override
			public String format(Slider slider, int value) {
				return Format.substitute(getMessage(), value);
			}
		};
	}
	
	public void setTipRenderer(TipRenderer renderer){
		tipRenderer = renderer;
	}
	
	protected String onFormatValue(int value) {
		return tipRenderer.format(this, value);
	}

}

With the above code structure, we can make a Slider to show "proficiency" in Programming thus:


Slider slider = new Slider();
slider.setMinValue(1);
slider.setMaxValue(5);
slider.setValue(1);
slider.setIncrement(1);
slider.setMessage("");
slider.setTipRenderer(new Slider.TipRenderer() {					
	@Override
	public String format(Slider slider, int value) {
		String tip = "";
		switch (value) {
		case 1:
			tip = "Novice";
			break;
		case 2:
			tip = "Beginner";
			break;
		case 3:
			tip = "Intermediate";
			break;
		case 4:
			tip = "Advanced";
			break;
		case 5:
			tip = "Expert";
			break;
		}
		return tip;
	}
});