Programming Examples

Are you a Programmer or Application Developer or a DBA? Take a cup of coffee, sit back and spend few minutes here :)

JSlider with Ticks Marks & Labels

1. Introduction to JSlider Component

The Java Swing’s JSlider Component helps the user to pick a value within range. The component will produce the ChangeEvent when user shifts the slider’s knob. Have a look at the below picture:

Java Swing Slider Parts
Java Swing Slider Parts

In the above picture, the JSlider looks like a horizontal bar with a knob on it. Here, the minimum value is set as 0 and maximum value is set as 100. When the user moves the knob, the value of the component changes which can be tracked via ChangeEvent.

The slider above shows tick marks in the component to aid the user in moving the knob for a specific value within the range of 0-100. Java Swing places Minor Tick marks within a pair of Major tick marks. The Tick Label will be placed on every Major Tick mark.

2. About JSlider Example

The below screenshot shows the JSlider Example:

Java Swing JSlider Example
Java Swing JSlider Example

In this example, we will learn how to use JSlider. Here, we create a JSlider component and handle its event when the user moves the knob. Our example has a text box below the slider component and the text field displays value at current knob location. This means, when the user moves the knob, we start seeing the change in value on the text field.

3. Show Slider in the JFrame

After declaring the JTextField as a class member, we create the JSlider via an empty constructor. The setMinimum and setMaximum functions will set the value-range for the slider component. In our example, the value range is 0-100. Next, we set the horizontal orientation to the java slider using the method setOrientation by giving the needed constant from SwingConstants.

Running the example at this stage shows plain slider as in the below picture:

Plain JSlider
Plain JSlider

4. JSlider Major & Minor Tick Marks

In a JSlider, the MajorTickMark field denotes the number of values between two major tick marks. In our case, we set 20 via setMajorTickSpacing. This means our swing slider will hold the value of a range of 20 within two Major Tick Marks. The MinorTickMark field of the slider tells the value of the range of values between two minor ticks. Note, one or more minor tick produces a Major Tick. In our example, we call setMinorTickSpacing to set a value range of 5 between two minor ticks.

Do we need to show the Tick marks and labels in the Swing’s Slider? The methods setPaintTicks and setPaintLabels will decide that based on the boolean argument passed to it. In our example, the swing slider component shows both Labels and Tick marks. Code is below:

Running the example at this stage shows the Slider as in the below picture. We increase the size of the slider so that it gives better precision while user moves the JSlider’s knob.

Slider with Tick Marks and Labels
Slider with Tick Marks and Labels

5. Resize the JSlider

One can resize the JSlider component using the setPreferedSize method, which overrides the default size of the component. In our case, the component is JSlider. Using this method, we set the width to 300 pixels and height to 50 pixels. In our Example, the FlowLayout Manager is managing the components in JFrame window. So, increasing the width of the JSlider component, moves the JTextField to the next line, hiding some of the Tick Labels. This makes us to adjust the height as well. Here we set height of the slide as 50 pixels.

6. ChangeEvent Handler Of JSlider

When user moves the knob of the JSlider component, the component will produce the ChangeEvent, and we can capture that via the handler function stateChanged. In our example, we fetch the value of the JSlider at current knob location by making call to the method getValue. We set this return value to the text field. Note, the swing slider will produce multiple ChangeEvent when user moves the slider knob continuously. Below is handler code for slider Knob Move:

7.Youtube Demo

8. Code Reference



Categories: Swing

Tags: , , , , ,

Do you like this Example? Please comment about it for others!!

This site uses Akismet to reduce spam. Learn how your comment data is processed.