View Full Version : Couple of questions regarding Ext.slider.Multi

1 Aug 2012, 8:38 AM
Hello experts

I am trying to develop my app (originally done in Flex, later using jQuery) using ExtJS.
I have come across plenty of problems already and I've managed to solve most of it myself (as a last result changing standard code ... I know, I am ashamed of myself) but at the moment I have come across something I am not able to solve.
I want to use a horizontal slider with 2 thumbs and custom labels (representing time with AM/PM notation).
I already did that but what I want to achieve next is following. I would like labels (tipText) to appear below thumb (not above as it does by default) and I would like these labels to be visible at all times (not only when moving thumb). Is it even achievable using standard control?


1 Aug 2012, 5:29 PM
Have a look at:


2 Aug 2012, 12:26 AM

I have made following changes to my code:

Ext.define('MCG.view.RatingSlider' ,{
extend: 'Ext.slider.Multi',
alias : 'widget.ratingSlider',
id: 'ratingSlider',

width: 250,
minValue: 0,
maxValue: 100,
values: [50, 100],
increment: 5,

tipText: function(thumb){
return '<b>' + thumb.value + '%</b>';

plugins : new Ext.slider.Tip({

position: 'bottom',

getText: function(thumb){
return '<b>' + thumb.value + '%</b>';



I have added attribute plugins and pass reference to Ext.slider.Tip.
I then set position of the labels to the bottom and added attribute getText with hooked up function to update label. I had to do that since after enabling plugins function hooked up to attribute tipText stops working. I wish it was better documented, it took me a while to make it work.
I am still left with one thing to do but I cant seem to find a solution. Any idea how I can make labels (tip texts) to be visible at all times?


8 Aug 2012, 6:54 PM
The tips are setup on a delay .. you could most likely override that function and remove the option to close. Make sure to add a close button if needed.