Re: http://www.google.com/hotelfinder

a quick decoding of the one there:

// Markup

.labelLeft {

    left:-12px; // Min position

    height: 25px;

    width: 25px;

    background-color: #444;

}

.labelRight {

    left:178px; // Max position

    height: 25px;

    width: 25px;

    background-color: #444;

}

<g:HTMLPanel>

    <div>

        <div style="float:left">Label left</div>

        <div style="float:right">Label right</div>

    </div>

    

    <div ui:field="container">

        <div style="left: 0px; width: 190px; height:5px;background-color:#777"></div>

        <g:Label ui:field="leftLabel" styleName="{style.labelLeft}"></g:Label>

        <g:Label ui:field="rightLabel" styleName="{style.labelRight}"></g:Label>

    </div>

</g:HTMLPanel>

// For the leftLabel

If you will use html use drag start, drag move and drag end events and do not capture the event, everything else is the same.

If you wont use html5, on mouse down event do: Event.setCapture(leftLabel.getElement());

And on mouse up event Event.releaseCapture(leftLabel.getElement());

Capturing the element means that all events will be passed to that element till release.

Then you need to implement the mouse move for the label:

1. Find the mouse position relative to the sliders container (event.getRelativeX(container) and event.getRelativeY(container))
2. Calculate the current position
3. Check bounds
4. Set the position of the slider (basically set the left style to the position you want) 

do the same for the right slider, add some pretty styles and you are ready to go.

Regards

On Mon, Aug 1, 2011 at 4:09 PM, Karthik Reddy <karthik.eleven@gmail.com> wrote:

The feedback widget seems identical to the one used in google plus. 

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.

To view this discussion on the web visit https://groups.google.com/d/msg/google-web-toolkit/-/_9l2ocSOyxgJ.

To post to this group, send email to google-web-toolkit@googlegroups.com.
To unsubscribe from this group, send email to google-web-toolkit+unsubscribe@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

--
Guit: Elegant, beautiful, modular and *production ready* gwt applications.

http://code.google.com/p/guit/

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To post to this group, send email to google-web-toolkit@googlegroups.com.
To unsubscribe from this group, send email to google-web-toolkit+unsubscribe@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.