1. #1
    Ext User
    Join Date
    Jul 2010
    Posts
    2
    Vote Rating
    0
    hoop is on a distinguished road

      0  

    Question Tooltip on Touch Slider

    Tooltip on Touch Slider


    Hello, I'm trying to build a slider with a tooltip (or floating balloon) that shows the current value using the Sencha Touch library.

    I didn't find any built-in option for this, could you give me some pointers on how to do this? I would like for it look like this:


  2. #2
    Sencha - Community Support Team
    Join Date
    Jun 2010
    Posts
    220
    Vote Rating
    1
    meyerovb is on a distinguished road

      0  

    Default


    Add a drag listener to the slider's thumb, and then show your element at the drag coordinates. You'll also have to deal with the tap-to-set-value case. Didn't test this, let me know if you can get it working, and if not post a pared down example of what you're best shot at it.

  3. #3
    Sencha User
    Join Date
    Jun 2010
    Location
    France
    Posts
    44
    Vote Rating
    0
    ludm is on a distinguished road

      0  

    Default


    How can I do to add a drag listener on the Thumb ?

  4. #4
    Ext User
    Join Date
    Jul 2010
    Posts
    2
    Vote Rating
    0
    hoop is on a distinguished road

      0  

    Default


    You can use the addListener method:

    HTML Code:
    Ext.getCmp("slider").thumbs[0].addListener('drag', sliderDrag);
    
    var sliderDrag = function(draggableObj, thumb) {						
    	Ext.getCmp("slider-price").setPosition(thumb.pageX);			
    };
    Where "slider" is the id of your slider control.

    However, I'm struggling to set the text on the tooltip based on the slider value as it messes with the drag event somehow.

  5. #5
    Sencha User justmoon's Avatar
    Join Date
    Mar 2007
    Posts
    5
    Vote Rating
    0
    justmoon is on a distinguished road

      0  

    Default


    I was working on the same problem, maybe this code will give somebody a running start. I won't answer questions on it and you'll have to finish it - for example adding formatting to the number in the tooltip. But there you go.

    Code:
    var mySliderTooltip = new Ext.Panel({
    	floating: true
    });
    
    mySlider.thumbs[0].addListener('dragstart', function (drag, thumb) {
    	mySliderTooltip.showBy(mySlider.thumbs[0]);
    	mySliderTooltip.el.setHTML(mySlider.thumbs[0].getValue());
    	mySliderTooltip.el.dom.style.webkitTransform = '';
    });
    mySlider.thumbs[0].addListener('drag', function (drag, thumb) {
    	x = drag.position.x - drag.startPosition.x;
    	mySliderTooltip.el.setHTML(mySlider.getSliderValue(drag.position.x, mySlider.thumbs[0]));
    	mySliderTooltip.el.dom.style.webkitTransform = 'translate3d(' + x + 'px, 0px, 0px)';
    });
    mySlider.thumbs[0].addListener('dragend', function (drag, thumb) {
    	mySliderTooltip.el.dom.style.webkitTransform = '';
    	mySliderTooltip.hide();
    });
    The gotcha that I think hoop was struggling with is that the thumb is not actually moved when it's dragged, but rather just transformed. You can get the position from the Draggable object though which is passed in with the event.

  6. #6
    Ext User
    Join Date
    Jun 2010
    Posts
    23
    Vote Rating
    0
    raven77m is on a distinguished road

      0  

    Default


    Nice!
    Works pretty good in chrome, but kinda slow on iPhone.
    Still awesome!
    Thanks for sharing!

  7. #7
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,146
    Vote Rating
    673
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    FYI the slider will fire a drag event in the next version, so you can just bind a drag event directly onto the slider.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  8. #8
    Ext User
    Join Date
    Jun 2010
    Posts
    23
    Vote Rating
    0
    raven77m is on a distinguished road

      0  

    Default


    Quote Originally Posted by justmoon View Post
    I was working on the same problem, maybe this code will give somebody a running start. I won't answer questions on it and you'll have to finish it - for example adding formatting to the number in the tooltip. But there you go.

    Code:
    var mySliderTooltip = new Ext.Panel({
        floating: true
    });
    
    mySlider.thumbs[0].addListener('dragstart', function (drag, thumb) {
        mySliderTooltip.showBy(mySlider.thumbs[0]);
        mySliderTooltip.el.setHTML(mySlider.thumbs[0].getValue());
        mySliderTooltip.el.dom.style.webkitTransform = '';
    });
    mySlider.thumbs[0].addListener('drag', function (drag, thumb) {
        x = drag.position.x - drag.startPosition.x;
        mySliderTooltip.el.setHTML(mySlider.getSliderValue(drag.position.x, mySlider.thumbs[0]));
        mySliderTooltip.el.dom.style.webkitTransform = 'translate3d(' + x + 'px, 0px, 0px)';
    });
    mySlider.thumbs[0].addListener('dragend', function (drag, thumb) {
        mySliderTooltip.el.dom.style.webkitTransform = '';
        mySliderTooltip.hide();
    });
    The gotcha that I think hoop was struggling with is that the thumb is not actually moved when it's dragged, but rather just transformed. You can get the position from the Draggable object though which is passed in with the event.
    Any ideas how to make this smoother on the iphone? I have it showing only one decimal place and its still really slow and choppy. Works great with Chrome/Safari but not very smooth on the iphone.
    I still love it though.


    Edit:
    I was playing around with the styling and I made a changed to this margin from 2 to 0 and now its super smooth on the iphone too!

    .slide .x-slider .x-field-thumb.x-field {
    margin: 2px;
    }

    Any ideas why? Does it have to do with using pixels instead of em?
    My only problems now is the tip reads -9% to 91% instead of 0% to 100%.
    Last edited by raven77m; 27 Aug 2010 at 11:34 AM. Reason: Found the answer

  9. #9
    Sencha User
    Join Date
    May 2011
    Posts
    1
    Vote Rating
    0
    Rhino1272 is on a distinguished road

      0  

    Default


    After reading this post and playing around with it for a while, I came up with a basic solution and posted it on my blog at http://www.devguy.org/2011/05/sencha...h-tooltip.html.

    Hope this helps!

Similar Threads

  1. [3.2] Ext.ux.slider.Highlight - A slider background color plugin
    By mankz in forum Ext 3.x: User Extensions and Plugins
    Replies: 8
    Last Post: 8 Feb 2012, 5:03 AM
  2. Sencha Touch on iPhone v1 / iPod touch v1 ?
    By palnap in forum Sencha Touch 1.x: Discussion
    Replies: 4
    Last Post: 28 Oct 2010, 5:30 PM
  3. Ext.Slider - Changing the range of an existing slider
    By srininara in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 24 Jun 2009, 3:49 AM

Thread Participants: 6

Tags for this Thread