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:
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:
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
//Sample 02: Text Field as Class Level JTextField tf = new JTextField(15); public JavaSwingSliderExample(String title) throws HeadlessException { super(title); //Sample 01: Set Size and Position setBounds(100, 100, 450, 300); Container ControlHost = getContentPane(); ControlHost.setLayout(new FlowLayout()); //Sample 03: Create a Simple Slider JSlider slider = new JSlider(); slider.setMinimum(0); slider.setMaximum(100); //slider.setOrientation(SwingConstants.VERTICAL); slider.setOrientation(SwingConstants.HORIZONTAL); ControlHost.add(slider); ControlHost.add(tf); |
Running the example at this stage shows plain slider as in the below picture:
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:
|
1 2 3 4 5 |
//Sample 04: Show the Tick Marks & Labels slider.setMajorTickSpacing(20); slider.setMinorTickSpacing(5); slider.setPaintTicks(true); slider.setPaintLabels(true); |
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.
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.
|
1 2 3 |
//Sample 05: Set Preferred Size //Note: The Height is 50 to render the ticks & labels slider.setPreferredSize(new Dimension(300, 50)); |
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:
|
1 2 3 4 5 6 7 8 9 |
//Sample 06:Handle the Slider's Event slider.addChangeListener(new ChangeListener() { @Override public void stateChanged(ChangeEvent e) { JSlider slider = (JSlider) e.getSource(); tf.setText("" +slider.getValue()); } }); |
7.Youtube Demo
8. Code Reference
8.1 MainEntry.java
|
1 2 3 4 5 6 7 8 9 |
package tube.coding.examples; public class MainEntry { public static void main(String[] args) { //Sample 07: Create Instance of JFrameDemo JavaSwingSliderExample frame = new JavaSwingSliderExample("Java Swing Slider Example"); frame.setVisible(true); } } |
8.2 JavaSwingSliderExample.java
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
package tube.coding.examples; import java.awt.Container; import java.awt.Dimension; import java.awt.FlowLayout; import java.awt.HeadlessException; import javax.swing.JFrame; import javax.swing.JSlider; import javax.swing.JTextField; import javax.swing.SwingConstants; import javax.swing.event.ChangeEvent; import javax.swing.event.ChangeListener; @SuppressWarnings("serial") public class JavaSwingSliderExample extends JFrame { //Sample 02: Text Field as Class Level JTextField tf = new JTextField(15); public JavaSwingSliderExample(String title) throws HeadlessException { super(title); //Sample 01: Set Size and Position setBounds(100, 100, 450, 300); Container ControlHost = getContentPane(); ControlHost.setLayout(new FlowLayout()); //Sample 03: Create a Simple Slider JSlider slider = new JSlider(); slider.setMinimum(0); slider.setMaximum(100); //slider.setOrientation(SwingConstants.VERTICAL); slider.setOrientation(SwingConstants.HORIZONTAL); ControlHost.add(slider); ControlHost.add(tf); //Sample 04: Show the Tick Marks & Labels slider.setMajorTickSpacing(20); slider.setMinorTickSpacing(5); slider.setPaintTicks(true); slider.setPaintLabels(true); //Sample 05: Set Preferred Size //Note: The Height is 50 to render the ticks & labels slider.setPreferredSize(new Dimension(300, 50)); //Sample 06:Handle the Slider's Event slider.addChangeListener(new ChangeListener() { @Override public void stateChanged(ChangeEvent e) { JSlider slider = (JSlider) e.getSource(); tf.setText("" +slider.getValue()); } }); } } |
Categories: Swing
Tags: ChangeEvent, JSlider, setPreferedSize, Slider Range, SwingConstants, TickSpacing
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.