Configuring the Slider component to display a custom tip

The Slider component is a welcome addition to the Ext JS arsenal. One of the enhancements that you can make to this widget consists of adding a tool tip that displays the Slider component's current value as seen here:

With little work, the tool tip can be made to display a friendlier message, as shown in the following screenshot:

How to do it...

1. 1. Define the SliderTip custom component:

   Note

   The SliderTip component used in this recipe is provided with the Ext JS documentation and samples at http://www.extjs.com/deploy/dev/examples/.

   Ext.ux.SliderTip = Ext.extend(Ext.Tip, {
   minWidth: 10,
   offsets: [0, -10],
   init: function(slider) {
   slider.on('dragstart', this.onSlide, this);
   slider.on('drag', this.onSlide, this);
   slider.on('dragend', this.hide, this);
   slider.on('destroy', this.destroy, this);
   },
   onSlide: function(slider) {
   this.show();
   this.body.update(this.getText(slider));
   this.doAutoWidth();
   this.el.alignTo(slider.thumb, 'b-t?', this.offsets...