Adding the Slider & Resizing The Square

Now that the square and color controls are set up, let’s add the slider to control the size of the square. The user should be able to change the square from 0% up to 100% of its maximum size using this slider.

But we also want to make sure that when the square resizes, nothing else in the layout moves around. The square should grow and shrink within its own space and not push other elements around.

Create the Slider

We’ll start by creating a new Slider object. It takes three arguments:

• the minimum value (0),

• the maximum (100),

• and the starting value (75).

Slider sizeSlider = new Slider(0, 100, 75);

We then customize the appearance to make it easier to use:

sizeSlider.setShowTickLabels(true);
sizeSlider.setShowTickMarks(true);
sizeSlider.setMajorTickUnit(25);
sizeSlider.setMinorTickCount(4);
sizeSlider.setBlockIncrement(5);
sizeSlider.setPrefWidth(400);

This shows helpful labels and tick marks every 25%, with smaller notches in between. It also makes the slider jump in steps of 5 when using the keyboard. The slider will be 400 pixels wide.