How do I reverse JSlider’s value-range?

On a normal JSlider the value range displayed left-to-right on a horizontal JSlider and bottom-to-top on vertical JSlider. To reverse the slider values from their normal order you can use the setInverted() method of the JSlider instance. Passing a true boolean value into this method call reverse the values order.

package org.kodejava.swing;

import javax.swing.*;
import java.awt.*;

public class JSliderInvertedDemo extends JPanel {
    public JSliderInvertedDemo() {
        initializeUI();
    }

    public static void showFrame() {
        JPanel panel = new JSliderInvertedDemo();

        JFrame frame = new JFrame("Inverted JSlider");
        frame.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
        frame.setContentPane(panel);
        frame.pack();
        frame.setVisible(true);
    }

    public static void main(String[] args) {
        SwingUtilities.invokeLater(JSliderInvertedDemo::showFrame);
    }

    private void initializeUI() {
        setLayout(new BorderLayout());
        setPreferredSize(new Dimension(500, 200));

        JSlider slider = new JSlider(JSlider.HORIZONTAL, 0, 20, 10);
        slider.setMinorTickSpacing(1);
        slider.setMajorTickSpacing(5);
        slider.setPaintLabels(true);
        slider.setPaintTicks(true);

        // Reverse the value-range of a JSlider. On a normal
        // horizontal JSlider the maximum value is on the right
        // side. Specifying inverted to true makes the maximum
        // value placed on the left side.
        slider.setInverted(true);

        add(slider, BorderLayout.CENTER);
    }
}

The result of the code snippet above is:

Inverted JSlider Demo

How do I create a JSlider with custom labels?

The JSlider‘s setLabelTable() method allows you to define a custom labels for the JSlider. The label table is a Hashtable that contains an Integer number as the keys and a JLabel component as their values. The integer keys correspond to the JSlider tick where the labels will be customized.

package org.kodejava.swing;

import javax.swing.*;
import java.awt.*;
import java.util.Hashtable;

public class JSliderCustomLabel extends JPanel {
    public JSliderCustomLabel() {
        initializeUI();
    }

    public static void showFrame() {
        JPanel panel = new JSliderCustomLabel();

        JFrame frame = new JFrame("JSlider Custom Label");
        frame.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
        frame.setContentPane(panel);
        frame.pack();
        frame.setVisible(true);
    }

    public static void main(String[] args) {
        SwingUtilities.invokeLater(JSliderCustomLabel::showFrame);
    }

    private void initializeUI() {
        setLayout(new BorderLayout());
        setPreferredSize(new Dimension(500, 200));

        JSlider slider = new JSlider(JSlider.VERTICAL, 0, 40, 0);
        slider.setMinorTickSpacing(1);
        slider.setMajorTickSpacing(5);
        slider.setPaintTicks(true);

        Hashtable<Integer, JLabel> labels = new Hashtable<>();
        labels.put(0, new JLabel("Freezing"));
        labels.put(15, new JLabel("Cold"));
        labels.put(25, new JLabel("Warm"));
        labels.put(35, new JLabel("Hot"));
        slider.setLabelTable(labels);

        slider.setPaintLabels(true);

        add(slider, BorderLayout.CENTER);
    }
}

The screen capture of the example above is:

JSlider with Custom Labels Demo

How do I create a JSlider that snap to the closest tick mark?

The JSlider‘s setSnapToTicks() method call is used to move JSlider‘s knob to the nearest tick mark from where you positioned the knob. The default value of this property is false. To make it snap to the closest tick set this property to true.

package org.kodejava.swing;

import javax.swing.*;
import java.awt.*;

public class SnapToTickJSlider extends JPanel {
    public SnapToTickJSlider() {
        initializeUI();
    }

    public static void showFrame() {
        JPanel panel = new SnapToTickJSlider();

        JFrame frame = new JFrame("JSlider - Snap to Tick");
        frame.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
        frame.setContentPane(panel);
        frame.pack();
        frame.setVisible(true);
    }

    public static void main(String[] args) {
        SwingUtilities.invokeLater(SnapToTickJSlider::showFrame);
    }

    private void initializeUI() {
        setLayout(new BorderLayout());
        setPreferredSize(new Dimension(500, 200));

        JSlider slider = new JSlider(JSlider.HORIZONTAL, 0, 30, 0);
        slider.setMinorTickSpacing(5);
        slider.setMajorTickSpacing(10);
        slider.setPaintLabels(true);
        slider.setPaintTicks(true);

        // Snaps to the closest tick mark next to where the user
        // positioned the knob.
        slider.setSnapToTicks(true);

        add(slider, BorderLayout.CENTER);
    }
}

The screen capture of the result of the code snippet above is:

JSlider Snap to Ticks Demo

How do I create a vertical JSlider?

To create a vertical JSlider set the orientation on the JSlider‘s constructor to JSlider.VERTICAL. If you do not pass JSlider.VERTICAL as a constructor parameter use the setOrientation() method instead.

package org.kodejava.swing;

import javax.swing.*;
import java.awt.*;

public class JSliderVertical extends JPanel {
    public JSliderVertical() {
        initializeUI();
    }

    public static void showFrame() {
        JPanel panel = new JSliderVertical();
        panel.setOpaque(true);

        JFrame frame = new JFrame();
        frame.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
        frame.setTitle("Vertical JSlider");
        frame.setContentPane(panel);
        frame.pack();
        frame.setVisible(true);
    }

    public static void main(String[] args) {
        SwingUtilities.invokeLater(JSliderVertical::showFrame);
    }

    private void initializeUI() {
        setLayout(new BorderLayout());
        setPreferredSize(new Dimension(500, 200));

        // Creates a vertical JSlider that accept value in the
        // range between 0 and 20. The initial value is set to 4.
        JSlider slider = new JSlider(JSlider.VERTICAL, 0, 20, 4);
        slider.setPaintTicks(true);
        slider.setPaintLabels(true);
        slider.setMinorTickSpacing(1);
        slider.setMajorTickSpacing(4);

        add(slider, BorderLayout.CENTER);
    }
}

The screen capture of the code snippet above.

Vertical JSlider Demo

How do I use a JSlider component?

This simple example show you how to use the JSlider component. A JSlider component is intended to let the user easily enter a numeric value bounded by a minimum and maximum value.

There are a couples properties that you need to set when creating a JSlider. These include setting setMinorTickSpacing(), setMajorTickSpacing(), setPaintTicks() and setPaintLabels(). These methods set the minor tick spacing, major tick spacing, display the ticks and the tick labels.

To get the selected value from JSlider we need to implements the stateChanged() method defined in the ChangeListener interface and then pass the listener to the JSlider by calling the addChangeListener() method.

package org.kodejava.swing;

import javax.swing.*;
import javax.swing.event.ChangeEvent;
import javax.swing.event.ChangeListener;
import java.awt.*;

public class JSliderDemo extends JPanel implements ChangeListener {
    private JTextField field;

    public JSliderDemo() {
        initializeUI();
    }

    private void initializeUI() {
        setLayout(new BorderLayout());
        setPreferredSize(new Dimension(500, 200));

        // Creates an instance of JSlider with a horizontal
        // orientation. Define 0 as the minimal value and
        // 50 as the maximum value. The initial value is set
        // to 10.
        JSlider slider = new JSlider(JSlider.HORIZONTAL, 0, 50, 10);

        slider.setPaintTicks(true);
        slider.setPaintLabels(true);
        slider.setMinorTickSpacing(1);
        slider.setMajorTickSpacing(10);

        slider.addChangeListener(this);

        JLabel label = new JLabel("Selected Value:");
        field = new JTextField(5);

        JPanel panel = new JPanel();
        panel.setLayout(new FlowLayout());
        panel.add(label);
        panel.add(field);

        add(slider, BorderLayout.NORTH);
        add(panel, BorderLayout.SOUTH);
    }

    public void stateChanged(ChangeEvent e) {
        JSlider slider = (JSlider) e.getSource();

        // Get the selection value of JSlider
        field.setText(String.valueOf(slider.getValue()));
    }

    public static void showFrame() {
        JPanel panel = new JSliderDemo();
        panel.setOpaque(true);

        JFrame frame = new JFrame();
        frame.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
        frame.setTitle("JSlider Demo");
        frame.setContentPane(panel);
        frame.pack();
        frame.setVisible(true);
    }

    public static void main(String[] args) {
        SwingUtilities.invokeLater(new Runnable() {
            public void run() {
                JSliderDemo.showFrame();
            }
        });
    }
}

Below is the result of the code snippet above.

JSlider Demo