Slider

A WSlider is a horizontal or vertical linear control with which you can set an integer value by moving an indicator within a particular range. You can also click on a point on the slider to change the value.

The default size is 150 x 50 pixels for a horizontal slider, and 50 x 150 pixels for a vertical slider. The slider size cannot be set explicitly by a CSS style sheet. You should use resize() or a layout manager for that purpose.

Example
In which year were you born?

source 
  void Slider() {
    WContainerWidget container = new WContainerWidget();
    new WText("In which year were you born?", (WContainerWidget) container);
    new WBreak((WContainerWidget) container);
    final WSlider slider = new WSlider((WContainerWidget) container);
    slider.resize(new WLength(500), new WLength(50));
    slider.setTickPosition(EnumSet.of(WSlider.TickPosition.TicksAbove));
    slider.setTickInterval(10);
    slider.setMinimum(1910);
    slider.setMaximum(2010);
    slider.setValue(1960);
    new WBreak((WContainerWidget) container);
    final WText out = new WText((WContainerWidget) container);
    slider
        .valueChanged()
        .addListener(
            this,
            () -> {
              out.setText("I was born in the year " + slider.getValueText() + ".");
            });
  }

Top

Vertical slider

You can create a vertical slider using setOrientation() with the parameter orientation set to Vertical on a default horizontal slider like in the above example or using a more specialized constructor.

Example
How much does Wt increase your efficiency?

source 
  void SliderVertical() {
    WContainerWidget container = new WContainerWidget();
    new WText("How much does Wt increase your efficiency?", (WContainerWidget) container);
    new WBreak((WContainerWidget) container);
    final WSlider verticalSlider = new WSlider(Orientation.Vertical, (WContainerWidget) container);
    verticalSlider.resize(new WLength(50), new WLength(150));
    verticalSlider.setTickPosition(WSlider.TicksBothSides);
    verticalSlider.setRange(5, 50);
    new WBreak((WContainerWidget) container);
    final WText out = new WText((WContainerWidget) container);
    out.setMargin(new WLength(10), EnumSet.of(Side.Left));
    verticalSlider
        .valueChanged()
        .addListener(
            this,
            () -> {
              out.setText(
                  "Currenly, my efficiency increased " + verticalSlider.getValueText() + "%!");
            });
  }

Top

Slider steps

A slider is customizable in that its size of steps can be specified. The steps define how much the value of a slider changed with each interaction. For example, if set to 1, dragging the slider slightly to the left or right will decrease of increase its value by 1.

Example
Try to select '7'. I bet you can't.

source 
  void SliderSteps() {
    WContainerWidget container = new WContainerWidget();
    new WText("Try to select '7'. I bet you can't.", (WContainerWidget) container);
    new WBreak((WContainerWidget) container);
    final WSlider slider = new WSlider((WContainerWidget) container);
    slider.resize(new WLength(300), new WLength(50));
    slider.setTickPosition(WSlider.TicksBothSides);
    slider.setRange(0, 10);
    slider.setStep(3);
    new WBreak((WContainerWidget) container);
    final WText out = new WText((WContainerWidget) container);
    out.setMargin(new WLength(10), EnumSet.of(Side.Left));
    slider
        .valueChanged()
        .addListener(
            this,
            () -> {
              out.setText("That's a failure, you selected: '" + slider.getValueText() + "'!");
            });
  }

Top

Native slider

You can use a native HTML5 slider by using setNativeControl(true). This allow the user to use arrow keys to change the value of the slider. However this does not support setTickPosition() and setTickLength().

Example
What is your favorite odd number?

source 
  void SliderNative() {
    WContainerWidget container = new WContainerWidget();
    new WText("What is your favorite odd number?", (WContainerWidget) container);
    new WBreak((WContainerWidget) container);
    final WSlider slider = new WSlider((WContainerWidget) container);
    slider.resize(new WLength(300), new WLength(50));
    slider.setNativeControl(true);
    slider.setTickInterval(10);
    slider.setRange(1, 99);
    slider.setStep(2);
    new WBreak((WContainerWidget) container);
    final WText out = new WText((WContainerWidget) container);
    out.setMargin(new WLength(10), EnumSet.of(Side.Left));
    slider
        .valueChanged()
        .addListener(
            this,
            () -> {
              out.setText("So your favorite odd number is " + slider.getValueText() + " !");
            });
  }

Top