mmm, its a bit more complicated than that. All what you need is in here: http://code.google.com/p/google-web-toolkit-incubator/source/browse/trunk/src/com/google/gwt/gen2/picker/client/SliderBar.java
On Wed, Aug 3, 2011 at 7:24 AM, Deepak Singh <deepaksingh...@gmail.com>wrote: > 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. > -- 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.