View Full Version : Always show the tip text of Slider in Extjs

4 Mar 2013, 1:18 AM
How to keep the tip text of the slider always visible?
Currently, the tip text is being visible whenever the user drags the bar of the slider.
I searched on docs (http://docs.sencha.com/ext-js/4-0/#!/api/Ext.slider.Single) but couldn't find any related concepts.

5 Mar 2013, 1:46 PM
There isn't a config to do this. You can kind of do this but I'm not sure of any issues with other tips used in an app:

Ext.define('Override.slider.Tip', {
override : 'Ext.slider.Tip',

init : function(slider) {
var me = this;


scope : me,
single : true,
delay : 100, //settle down DOM
afterRender : me.onSliderRender

scope : me,
dragend : me.hide //this is what stops the tip from hiding

onSliderRender : function(slider) {
var thumbs = slider.thumbs,
t = 0,
tLen = thumbs.length,
onSlide = this.onSlide;

for (; t < tLen; t++) {
onSlide(slider, null, thumbs[t]);

Ext.create('Ext.slider.Single', {
width : 200,
value : 50,
increment : 10,
minValue : 0,
maxValue : 100,
renderTo : Ext.getBody()

5 Mar 2013, 8:23 PM
@mitchellsimoens (http://www.sencha.com/forum/member.php?22216-mitchellsimoens) This is working. Thanks. But actually, I am also moving the bar using two buttons which are adjacent to the slider ('<' and '>'). Your code works fine if I am only working with slider. But if I just press the adjacent buttons, the bar moves but not the tip text. Anyway to solve this too? [B]

21 Aug 2013, 12:55 PM
Mitchell, I want to try this for displaying tooltips in Sencha Touch slider, but I'm confused.. how do I implement your code above? I'm using Sencha Architect if you can give it in context of that.. If you want to keep it more vague to help other people that's also fine.


21 Aug 2013, 8:37 PM
I asked the same question on Stackoverflow. where I got the solution. Here is the link http://stackoverflow.com/q/15198053/1577396