|
SliderBar
Sliding knob over a range of values
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?