Change the JSlider look and feel

Question

I have gone through this website Change look and feel of JSlider but except for Slider.altTrackColor nothing else is working. I want to do something like shown in pic1 any suggestion would be of great help. I'm working on JDK 1.6.

UIDefaults defaults = UIManager.getDefaults();    

       defaults.put("Slider.altTrackColor", Color.red);
       defaults.put("Slider.thumb", Color.red);

I have also tried this:

    WindowUtilities.setNativeLookAndFeel();

 // WindowUtilities.setNimbuzzLookAndFeel();

 // WindowUtilities.setJavaLookAndFeel();

WindowUtilities is class that tells the system to use native look and feel, as in previous releases. Metal (Java) LAF is the default otherwise.

public static void setNativeLookAndFeel() {
try {
  UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
} catch(Exception e) {
  System.out.println("Error setting native LAF: " + e);
}

Arbitrage

from next time i will keep that in mind. thank you for correcting – Arbitrage

BTW - what is a WindowUtilities? DYM SwingUtilities? For better help sooner, post an SSCCE. – Iphigeniah

@AndrewThompson its a class /** Tell system to use native look and feel, as in previous * releases. Metal (Java) LAF is the default otherwise. */ – Arbitrage

Include it in the SSCCE. – Iphigeniah

Answer 1

Here is a full example of working UI that shown on 1st image:
(no magic - just a bit of work with graphics and basic UI knowledge)

import java.awt.BasicStroke;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.RenderingHints;
import java.awt.Stroke;
import java.awt.geom.GeneralPath;
import javax.swing.JComponent;
import javax.swing.JFrame;
import javax.swing.JSlider;
import javax.swing.SwingConstants;
import javax.swing.plaf.basic.BasicSliderUI;

/**
 *
 * @see https://mcmap.net/q/1649760/-change-the-jslider-look-and-feel
 */
public class CustomSliderUI extends BasicSliderUI {

    private BasicStroke stroke = new BasicStroke(1f, BasicStroke.CAP_ROUND, 
            BasicStroke.JOIN_ROUND, 0f, new float[]{1f, 2f}, 0f);

    public CustomSliderUI(JSlider b) {
        super(b);
    }

    @Override
    public void paint(Graphics g, JComponent c) {
        Graphics2D g2d = (Graphics2D) g;
        g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, 
                RenderingHints.VALUE_ANTIALIAS_ON);
        super.paint(g, c);
    }

    @Override
    protected Dimension getThumbSize() {
        return new Dimension(12, 16);
    }

    @Override
    public void paintTrack(Graphics g) {
        Graphics2D g2d = (Graphics2D) g;
        Stroke old = g2d.getStroke();
        g2d.setStroke(stroke);
        g2d.setPaint(Color.BLACK);
        if (slider.getOrientation() == SwingConstants.HORIZONTAL) {
            g2d.drawLine(trackRect.x, trackRect.y + trackRect.height / 2, 
                    trackRect.x + trackRect.width, trackRect.y + trackRect.height / 2);
        } else {
            g2d.drawLine(trackRect.x + trackRect.width / 2, trackRect.y, 
                    trackRect.x + trackRect.width / 2, trackRect.y + trackRect.height);
        }
        g2d.setStroke(old);
    }

    @Override
    public void paintThumb(Graphics g) {
        Graphics2D g2d = (Graphics2D) g;
        int x1 = thumbRect.x + 2;
        int x2 = thumbRect.x + thumbRect.width - 2;
        int width = thumbRect.width - 4;
        int topY = thumbRect.y + thumbRect.height / 2 - thumbRect.width / 3;
        GeneralPath shape = new GeneralPath(GeneralPath.WIND_EVEN_ODD);
        shape.moveTo(x1, topY);
        shape.lineTo(x2, topY);
        shape.lineTo((x1 + x2) / 2, topY + width);
        shape.closePath();
        g2d.setPaint(new Color(81, 83, 186));
        g2d.fill(shape);
        Stroke old = g2d.getStroke();
        g2d.setStroke(new BasicStroke(2f));
        g2d.setPaint(new Color(131, 127, 211));
        g2d.draw(shape);
        g2d.setStroke(old);
    }

    public static void main(String[] args) {
        JFrame frame = new JFrame();
        JSlider slider = new JSlider(0, 100);
        slider.setPaintTicks(true);
        slider.setPaintLabels(true);
        slider.setMinorTickSpacing(5);
        slider.setMajorTickSpacing(25);
        slider.setUI(new CustomSliderUI(slider));
        frame.add(slider);
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.pack();
        frame.setVisible(true);
    }
}

You can easily modify the thumb (gripper) size by changing the returned bounds. The thumb painting will adapt to any size. And you can also easily customize painting of any other slider part.

Here is the final view by the way:

P.S. I did not adapt UI for vertical sliders, but that shouldn't take too long.

Destrier