|
SliderBar
Sliding knob over a range of values
Type-Widget IntroductionThe 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 CSSHere 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 CodeSliderBar slider = new SliderBar(0.0, 100.0); slider.setStepSize(5.0); slider.setCurrentValue(50.0); slider.setNumTicks(10); slider.setNumLabels(5);
|
► Sign in to add a comment
Robot
I was looking forward to this.
The URL for the example 404's.
Hi to work with GWT designer we must have a default constructor
Very useful control Would it be possible to have two knobs in the same slider ?
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
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"/>
for above question look here: http://code.google.com/p/google-web-toolkit-incubator/wiki/Widgets
Any chance to disable/enable this control?
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).
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.
Yes css is mandatory
ChangeListener? is deprecated so will SliderBar be updated to use ChangeHandler??
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?
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?
"ChangeListener?? is deprecated so will SliderBar be updated to use ChangeHandler???"
Me too. Its odd, as it has other handlers.
The slider is not draggable on the iPhone. Any simple fix for that?
Is slider bar can be added in GChart?
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
@chevronthecoder, do you have any idea if GChart has been abandoned? I am currently working with it...
i dont think aaanyone is doing a dual slider with gwt that works yet?
Example does not work in Win7 Firefox 3.6?
Hi! I got this problem too. ==>Example does not work in Win7 Firefox 3.6?
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
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:
It's from this page: http://code.google.com/p/google-web-toolkit-incubator/wiki/HowToUseTheIncubator
hth
To get the slider to react to events, I needed to explicitly sink events. E.g.:
I am using gwt 2.0
The correct import is <inherits name='com.google.gwt.gen2.picker.Picker' />
And the latest jar is here: http://code.google.com/p/google-web-toolkit-incubator/wiki/Downloads?tm=2
latest docs(?): http://collectionofdemos.appspot.com/javadoc/index.html
demo: http://google-web-toolkit-incubator.googlecode.com/svn/trunk/demo/SliderBar/index.html
more docs: http://code.google.com/docreader/#p=google-web-toolkit-incubator&s=google-web-toolkit-incubator&t=SliderBar
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...
I agree with lynxmap - something like this http://www.crionics.com/products/opensource/faq/swing_ex/JSliderExamples1.html
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.
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).
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.
My sliderbar is not moving. slider.setWidth("250px");
what am I missing?
mSliderBar.sinkEvents( Event.MOUSEEVENTS ); mSliderBar.sinkEvents( Event.KEYEVENTS ); mSliderBar.sinkEvents( Event.ONMOUSEWHEEL ); mSliderBar.sinkEvents( Event.FOCUSEVENTS );
Nice work!
I can't get the demo running on FF/Mac
Looks lovely but likewise the demo doesn't work on FF/Mac
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?
Same thing here. Not working on Firefox 3.6 and 4 on both Windows and Mac
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
Vaadin port ( http://code.google.com/p/sliderbar-for-vaadin/source/checkout )
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.