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>

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()
});