GWT Slider

GWT Slider

How to implement slide-bar in GWT is discussed over here. Side bar is of two type Horizontal and Vertical Slider-bars. Each Slider-Bar build using different widgets, some are required and other is optional. Required widgets are Drag widget and Scale widget, and optional are less widget and more widget. Slider-Bar may include only one drag element and only one scale element. Slider-Bar may include zero or more 'less' and 'more' elements. 

This can be simple achieved by following 3 steps:

STEP 1:

Download JAR from sidebar https://code.google.com/p/gwt-slider-bar/downloads/detail?name=gwt-slider-bar-1.0.jar
Add the jar to your GWT project build path
Add this line to your *.gwt.xml file
<inherits name="com.kiouri.sliderbar.SliderBarMVP" />

STEP 2:

Create a class which extends SliderBarHorizontal or SliderBarVertical, up on your need.
WaterTalkHorizontalSlider class is given below.

import com.google.gwt.user.client.ui.Image;

import com.kiouri.sliderbar.client.view.SliderBarHorizontal;

public class WaterTalkHorizontalSlider extends SliderBarHorizontal{

         public WaterTalkHorizontalSlider (int maxValue, String width) {

          setLessWidget(new Image("img/slid/less.png"));

          setMoreWidget(new Image("img/slid/more.png"));

          setScaleWidget(new Image("img/slid/scale.png"), 100);

          setMoreWidget(new Image("img/slid/more.png"));

          setDragWidget(new Image("img/slid/drag.png"));

          this.setWidth(width);

          this.setMaxValue(maxValue);        

      }

}



Use custom images or widgets over here it make it more intuitive and user friendly.

You can set the less widget, More widget, Scale widget, drag widget, width and max value etc.

STEP 3:

Create instance of above class and customize it and use it where ever you needed.

WaterTalkHorizontalSlider sliderBar = new WaterTalkHorizontalSlider(50, "600px");

sliderBar.drawMarks("white",50);

              sliderBar.setMinMarkStep(3);

              sliderBar.setNotSelectedInFocus();

              sliderBar.setValue(5);

              container.add(sliderBar);

      

That’s it.