Hi Gal, I followed the instructions and prepared a uibinder which looks same as hotel finder two way slider.
<g:HTMLPanel> <div class="GPTJ3ICDOV"> <div style="align:left"> <div class="GPTJ3ICDLV"> <span class="GPTJ3ICDMV">Price per night</span> <span class="GPTJ3ICDKV"><g:Label ui:field="slidingData"></g:Label></span> </div> </div> <div class="GPTJ3ICDPV"> <div class="GPTJ3ICDIU"> <div class="GPTJ3ICDOU" ui:field="container"> <div class="GPTJ3ICDNU"></div> <div class="GPTJ3ICDBV" style="left: 0px; width: 190px;"></div> <g:Image styleName="GPTJ3ICDMU" ui:field="leftSlider"></g:Image> <g:Image styleName="GPTJ3ICDAV" ui:field="rightSlider"></g:Image> </div> </div> </div> </div> </g:HTMLPanel> Now in java class, i add handlers to the images leftSlider and righSlider as follows public void addhandlers() { leftSlider.addDragEnterHandler(new DragEnterHandler() { @Override public void onDragEnter(DragEnterEvent event) { } }); leftSlider.addDragExitHandler(new DragExitHandler() { @Override public void onDragExit(DragExitEvent event) { } }); leftSlider.addDragOverHandler(new DragOverHandler() { @Override public void onDragOver(DragOverEvent event) { } }); leftSlider.addDropHandler(new DropHandler() { @Override public void onDrop(DropEvent event) { } }); leftSlider.addMouseMoveHandler(new MouseMoveHandler() { @Override public void onMouseMove(MouseMoveEvent event) { leftSlider.getElement().getStyle().setLeft(event.getRelativeX(container), Unit.PX); } }); rightSlider.addMouseMoveHandler(new MouseMoveHandler() { @Override public void onMouseMove(MouseMoveEvent event) { rightSlider.getElement().getStyle().setLeft(event.getRelativeX(container), Unit.PX); } }); } Initially when the page renders, it is fine. When i do mouse over the slider images, i observe that 1) MouseMoveHandler works only with mouse movement from left to right. If a move the mouse from right direction to left, nothing happens. 2) Also, how do i check bounds? 3) How to set the minimum and maximum value of the sliders? Thanks Deepak On Tue, Aug 2, 2011 at 5:44 AM, Gal Dolber <gal.dol...@gmail.com> wrote: > 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.ele...@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+unsubscr...@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+unsubscr...@googlegroups.com. > For more options, visit this group at > http://groups.google.com/group/google-web-toolkit?hl=en. > -- 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+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.