My favorites | Sign in
Project Home Downloads Wiki Issues Source
Search
for
SliderBar  
Sliding knob over a range of values
Type-Widget
Updated Feb 4, 2010 by rjrjr@google.com

Introduction

The SliderBar input Widget lets the user select a value from a range of values via mouse events or keyboard events. You can dynamically change the minimum and maximum values and step size. The size size allows you to restrict the selected value based on an incremental step.

The widget itself can display tick marks and labels along the range. You can specify how many tick marks or labels to show.

The widget is highly customizable via CSS, and the knob itself can be swapped using an Image Bundle.

Example: http://google-web-toolkit-incubator.googlecode.com/svn/trunk/demo/SliderBar/index.html

CSS

Here is an example CSS style for the SliderBar Widget:

.gwt-SliderBar-shell {
  border: 2px solid #faf9f7;
  border-right: 2px solid #848280;
  border-bottom: 2px solid #848280;
  background-color: #efebe7;
  height: 34pt;
  width: 50%;
}
.gwt-SliderBar-shell .gwt-SliderBar-line {
  border: 1px solid black;
  background-color: white;
  height: 4px;
  width: 95%;
  top: 22pt;
  overflow: hidden;
}
.gwt-SliderBar-shell .gwt-SliderBar-knob {
  top: 14pt;
  width: 11px;
  height: 21px;
  z-index: 1;
  cursor: pointer;
}
.gwt-SliderBar-shell .gwt-SliderBar-tick {
  top: 12pt;
  width: 1px;
  height: 8pt;
  background: black;
  overflow: hidden;
}
.gwt-SliderBar-shell .gwt-SliderBar-label {
  top: 2pt;
  font-size: 8pt;
  cursor: default;
}
.gwt-SliderBar-shell-focused {
}
.gwt-SliderBar-shell .gwt-SliderBar-line-sliding {
  background-color: #DDDDDD;
  cursor: pointer;
}

Sample Code

  SliderBar slider = new SliderBar(0.0, 100.0);
  slider.setStepSize(5.0);
  slider.setCurrentValue(50.0);
  slider.setNumTicks(10);
  slider.setNumLabels(5);

Comment by mcw...@gmail.com, Sep 25, 2007

Robot

Comment by alifuata...@gmail.com, Sep 26, 2007

I was looking forward to this.

Comment by hamb...@gmail.com, Oct 15, 2007

The URL for the example 404's.

Comment by fremma...@gmail.com, Dec 6, 2007

Hi to work with GWT designer we must have a default constructor

Comment by ofr...@gmail.com, Feb 13, 2008

Very useful control Would it be possible to have two knobs in the same slider ?

Comment by weisb...@gmail.com, Mar 28, 2008

Thanks! Whoever made this just saved me a whole lot of time.

Ps. If you're new to using 3rd-party modules, here's how to get this running: 1) download gwt-incubator_1-4_final.jar 2) add the jar to your CLASSPATH 3) add <inherits name='com.google.gwt.widgetideas.WidgetIdeas'/> to your .gwt.xml file

Comment by jamesty...@gmail.com, May 15, 2008

Could someone tell me the correct <inerits ==?? to add to the .xml file. I get an error when I add the following.. the import statement worked fine however in eclipse.

<inherits name="com.google.gwt.widgetideas.client.SliderBar"/>

Comment by ajakimc...@gmail.com, Jun 26, 2008
Comment by jan...@gmail.com, Aug 7, 2008

Any chance to disable/enable this control?

Comment by darkfl...@gmail.com, Jan 28, 2009

Excelent stuff! Random idea for the next version; Letting the colour of the line element be set from the code rather then just css. (As people may want the colour to change based on the value...eg, a slider that turns red at low values and green at high ones).

Comment by csvala...@gmail.com, Jan 29, 2009

Can someone share the sample code please? I have added it to my existing GWT application, it doesn't display the slider bar properly. Should I need to include the css also?

Sorry I am new to GWT.

Senthil.

Comment by eau...@gmail.com, Jul 13, 2009

Yes css is mandatory

Comment by viet...@gmail.com, Aug 4, 2009

ChangeListener? is deprecated so will SliderBar be updated to use ChangeHandler??

Comment by chandu2...@gmail.com, Sep 22, 2009

Is it possible to change the knob image? if so how can this be done? also i noticed that the knob image is pointed to 55FE578766A1AC09EFD868E978B16C52.cache.png, here is the image cached?

Comment by lauratak...@gmail.com, Sep 29, 2009

Thank you for this very nice widget!

One question related to styling of the sliderbar. When the slider knob is moved there appears a dashed line around the sliderbar shell. I tried to modify the .gwt-SliderBar-shell-focused -style in order to remove the line, but it didn't have any effect. How to remove the dashed line?

Comment by darkfl...@gmail.com, Oct 6, 2009

"ChangeListener?? is deprecated so will SliderBar be updated to use ChangeHandler???"

Me too. Its odd, as it has other handlers.

Comment by zorze...@gmail.com, Oct 27, 2009

The slider is not draggable on the iPhone. Any simple fix for that?

Comment by chevront...@gmail.com, Nov 29, 2009

Is slider bar can be added in GChart?

Comment by kamili...@gmail.com, Dec 6, 2009

does anyone know how to add two knobs onto the slider bar? i would like to have a slider with a range you can search for

Comment by xxedg...@gmail.com, Dec 8, 2009

@chevronthecoder, do you have any idea if GChart has been abandoned? I am currently working with it...

Comment by kamili...@gmail.com, Dec 14, 2009

i dont think aaanyone is doing a dual slider with gwt that works yet?

Comment by andrej.s...@gmail.com, Mar 9, 2010

Example does not work in Win7 Firefox 3.6?

Comment by huyi0...@hotmail.com, Mar 22, 2010

Hi! I got this problem too. ==>Example does not work in Win7 Firefox 3.6?

Comment by DMeier.F...@gmail.com, May 21, 2010

I got the following message, if i compile the project: ERROR? Unable to find 'com/google/gwt/widgetideas/client/SliderBar.gwt.xml' on your classpath; could be a typo, or maybe you forgot to include a classpath entry for source?

I have inherited the SliderBar into the .gwt.xml and where else I must set the classpath?

Thanks for help

Comment by neg...@gmail.com, Jul 21, 2010

For those looking to use the SliderBar (or any other from the incubator for that matter), it took a lot of searching but I actually found it in the end:

# Get the incubator jar:

# Add the incubator.jar to your project's classpath. # Add the following lines to your module file:

<inherits name='com.google.gwt.widgetideas.WidgetIdeas' /> <inherits name='com.google.gwt.libideas.LibIdeas' />

It's from this page: http://code.google.com/p/google-web-toolkit-incubator/wiki/HowToUseTheIncubator

hth

Comment by jelleouw...@gmail.com, Aug 10, 2010

To get the slider to react to events, I needed to explicitly sink events. E.g.:

mSliderBar.sinkEvents( Event.MOUSEEVENTS ); mSliderBar.sinkEvents( Event.KEYEVENTS ); mSliderBar.sinkEvents( Event.ONMOUSEWHEEL ); mSliderBar.sinkEvents( Event.FOCUSEVENTS );

I am using gwt 2.0

Comment by lynx...@gmail.com, Sep 27, 2010

Would also be great to be able to add multiple slider knobs on a single track.

Ah, I miss Flash. Too bad Apple has killed the market for Flash apps. I am rewriting a complex map app for a client in HTML 5 using GWT, but there are a lot of hurdles to get the same functionality and usability...

Comment by stussy...@gmail.com, Sep 30, 2010
Comment by lynx...@gmail.com, Oct 3, 2010

JQuery has a nice double slider, and there is a library to get it to work with GWT (though I have not succeeded yet!).

Wishing ext-GWT had a double slider too.

Comment by lynx...@gmail.com, Oct 4, 2010

I wrote my own double slider based on the Incubator, but without the depreciated classes and also without using the DOM clientWidth and OffsetWidth? methods, which seem like they could cause cross browser issues. Also, all the CSS is built in, but you can set the color, width, and stepValues programmatically.

But to simplify matters, it does not respond to keyboard events, and there's no labels or ticks.

I just wanted something simple, that responds to clicks along the rail (important for iphone users).

Here is a Demo: http://lynxslider.appspot.com

If anyone would like source code, email me. It's just one short .java file, and two images--easy to include as a custom widget for GWT.

Comment by sumi...@gmail.com, Oct 16, 2010

My sliderbar is not moving. slider.setWidth("250px");

slider.setStepSize(50.0);
slider.setCurrentValue(50.0); slider.setNumTicks(10); slider.setNumLabels(5);

what am I missing?

Comment by sumi...@gmail.com, Oct 16, 2010

mSliderBar.sinkEvents( Event.MOUSEEVENTS ); mSliderBar.sinkEvents( Event.KEYEVENTS ); mSliderBar.sinkEvents( Event.ONMOUSEWHEEL ); mSliderBar.sinkEvents( Event.FOCUSEVENTS );

Comment by onyeje.b...@gmail.com, Dec 3, 2010

Nice work!

Comment by vela.ign...@gmail.com, Jan 11, 2011

I can't get the demo running on FF/Mac

Comment by rogerh...@gmail.com, Jan 24, 2011

Looks lovely but likewise the demo doesn't work on FF/Mac

Comment by sjryan....@gmail.com, Apr 21, 2011

The example does not appear to work in Firefox 4.0 for windows 7. Any reason why the example doesn't appear to work in Firefox?

Comment by luci.pac...@gmail.com, Apr 28, 2011

Same thing here. Not working on Firefox 3.6 and 4 on both Windows and Mac

Comment by ruslan.s...@gmail.com, Jun 16, 2011

hi, could anyone help with an app with 3 basic funktion: input to google spreadsheet via sliderbar, store in spreadsheet with some simple forms and report on demand via googles chart. Thanks in advance. Some reward is possible greetings ruslan.savitskij@gmail.com

Comment by benoit.sautel@gmail.com, Dec 28, 2011

The example doesn't work in Firefox probably because of it has been compiled with an old version of GWT. Firefox permutation of this old version uses a method that was deprecated and that has been removed: https://developer.mozilla.org/en/DOM/document.getBoxObjectFor I've tested with GWT 2.3 compiler and it works.


Sign in to add a comment
Powered by Google Project Hosting