Always visible slider's tip. Slider with buttons

http://stackoverflow.com/questions/15198053/always-show-the-tip-text-of-slider-in-extjs

HTML

<link rel="stylesheet" href="http://cdn.sencha.io/ext-4.1.0-gpl/resources/css/ext-all.css">
<script src="http://cdn.sencha.io/ext-4.1.0-gpl/ext-all.js"></script>
<table>

</table>

JavaScript

Ext.define('AlwaysVisibleTip', {
  extend: 'Ext.slider.Tip',

  init: function(slider) {
    var me = this;
    me.callParent(arguments);
    slider.removeListener('dragend', me.hide);
    slider.on({
      scope: me,
      change: me.onSlide,
      afterrender: {
        fn: function() {
          me.onSlide(slider, null, slider.thumbs[0]);
        },
        delay: 100
      }
    });
  }
});

var slider = Ext.create('Ext.slider.Single', {
  animate: false,
  plugins: [Ext.create('AlwaysVisibleTip', {
    getText: function(thumb) {
      var months = ['', 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
      return Ext.String.format(months[thumb.value]);
    }
  })],
  width: 200,
  value: 6,
  increment: 1,
  minValue: 1,
  maxValue: 12
});

Ext.create('Ext.form.Panel', {
  title: 'FieldContainer Example',
  width: 550,
  height: 100,
  bodyPadding: 10,

  items: [{
    xtype: 'fieldcontainer',
    fieldLabel: 'Label',
    labelWidth: 100,

    // The body area will contain three text fields, arranged
    // horizontally, separated by draggable splitters.
    layout: 'hbox',
    items: [{
        xtype: 'button',
        handler: function() {
          slider.setValue(slider.getValue() - 10);
        },
        text: '<'
      },
      slider, {
        xtype: 'button',
        handler: function() {
          slider.setValue(slider.getValue() + 10);
        },
        text: '>'
      },
    ]
  }],
  renderTo: Ext.getBody()
});