PDA

View Full Version : Tooltip on Touch Slider



hoop
27 Jul 2010, 9:37 AM
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:

http://html5.limewebs.com/images/Slider.png

meyerovb
27 Jul 2010, 9:34 PM
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.

ludm
29 Jul 2010, 12:11 AM
How can I do to add a drag listener on the Thumb ?

hoop
29 Jul 2010, 7:52 AM
You can use the addListener method:



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.

justmoon
26 Aug 2010, 1:08 AM
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.


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.

raven77m
26 Aug 2010, 10:18 AM
Nice!
Works pretty good in chrome, but kinda slow on iPhone.
Still awesome!
Thanks for sharing!

evant
26 Aug 2010, 9:50 PM
FYI the slider will fire a drag event in the next version, so you can just bind a drag event directly onto the slider.

raven77m
27 Aug 2010, 8:18 AM
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.


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%.

Rhino1272
3 Aug 2011, 9:11 AM
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-touch-slider-with-tooltip.html.

Hope this helps!