Add tip text dynamically to a slider

In my project, I am trying to add the tip text (config) dynamically to a slider. How to do that? I need to add it dynamically because I am generating the array of variables in a "Controller", which holds the text for each value of the slider (for tip text).

var slider = Ext.getCmp('slider')
slider.setTipText(arrayOfVariables)    //What should I do here instead?

There is no such method like setTipText in docs. What should I use then?


        animate: false,
        //plugins: [Ext.create('App.view.SliderOverride')],
        cls: 'sliderStyle',
        width: "80%",
        id: 'slider',
        value: 36/2, //must be current month
        //increment: 10,
        minValue: 1,
        maxValue: 36,
        useTips: true,          
        tipText: function(thumb){



tipText requires a function config so you can add a function that will use your variables from controller;

Ext.create('Ext.slider.Multi', {
     tipText: function(){
          return App.getController('your controller').yourVariable

This is added on the creation of the slider so you don't need to modify it , just your variables in controller. So you don't need to re set the tip text function.


I solved this issue by using getText method of Ext.slider.Tip.

Used to create the text that appears in the Tip's body. By default this just returns the value of the Slider Thumb that the Tip is attached to. Override to customize.

For example in which situation it can be used, you have a look at this link


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.