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

public class JSliderPanel extends JPanel implements ChangeListener {

JLabel l1, l2, l3, l3a; //Declare more objects as needed for the labels.
JLabel l4, l5, l6, l6a;

Color myColor1, myColor2; //declare custom Color objects

JSlider j1;
JSlider j2;

int bar1 = 0;
int bar2 = 0;

/* Declare and assign for the second JSlider and bar2. */

public JSliderPanel()
 {
   setLayout(null);
// setPreferredSize(new Dimension(390,440)); //This has no effect for BorderLayout
   setBackground(Color.BLACK);
   setOpaque(true);

/* The below show the creation of custom colors based on the RGB values. */
   myColor1 = new Color(204,204,153);
   myColor2 = new Color(153,204,204);

   j1 = new JSlider(JSlider.VERTICAL,0,200,bar1);
   j1.setSize(150,200);
   j1.setLocation(50,275);
   j1.setBackground(Color.BLUE);
   j1.setForeground(Color.WHITE);
   j1.setVisible(true);

/* The setMajorTickSpacing(int) method must be used first. */
   j1.setMajorTickSpacing(10);
   j1.setMaximum(50);
   j1.setPaintLabels(true);
   j1.setPaintTicks(true);

   j1.setBorder(BorderFactory.createEtchedBorder());
   add(j1); //JPanel has no content pane.
   j1.addChangeListener(this);

   j2 = new JSlider(JSlider.VERTICAL,0,200,bar2);
   j2.setSize(150,200);
   j2.setLocation(300,275);
   j2.setBackground(Color.RED);
   j2.setForeground(Color.WHITE);
   j2.setVisible(true);

/* The setMajorTickSpacing(int) method must be used first. */
   j2.setMajorTickSpacing(5);
   j2.setMaximum(43);
   j2.setPaintLabels(true);
   j2.setPaintTicks(true);

   j2.setBorder(BorderFactory.createEtchedBorder());
   add(j2); //JPanel has no content pane.
   j2.addChangeListener(this);


   l1 = new JLabel("50", JLabel.RIGHT);
   l1.setSize(30,25);
   l1.setBackground(Color.BLACK);
   l1.setForeground(Color.WHITE);
   l1.setOpaque(false); //set to false for transparent label
   l1.setLocation(17,22);
   add(l1);
   l1.setVisible(true);

   l2 = new JLabel("25", JLabel.RIGHT);
   l2.setSize(30,25);
   l2.setBackground(Color.BLACK);
   l2.setForeground(Color.WHITE);
   l2.setOpaque(false);
   l2.setLocation(17,123);
   add(l2);
   l2.setVisible(true);

   l3 = new JLabel("Number of", JLabel.CENTER);
   l3.setSize(150,50);
   l3.setBackground(Color.BLACK);
   l3.setForeground(Color.WHITE);
   l3.setOpaque(false);
   l3.setLocation(50,462);
   add(l3);
   l3.setVisible(true);

   l3a = new JLabel("States", JLabel.CENTER);
   l3a.setSize(150,50);
   l3a.setBackground(Color.BLACK);
   l3a.setForeground(Color.WHITE);
   l3a.setOpaque(false);
   l3a.setLocation(50,475);
   add(l3a);
   l3a.setVisible(true);

   l4 = new JLabel("43", JLabel.RIGHT);
   l4.setSize(30,25);
   l4.setBackground(Color.BLACK);
   l4.setForeground(Color.WHITE);
   l4.setOpaque(false); //set to false for transparent label
   l4.setLocation(267,22);
   add(l4);
   l4.setVisible(true);

   l5 = new JLabel("21", JLabel.RIGHT);
   l5.setSize(30,25);
   l5.setBackground(Color.BLACK);
   l5.setForeground(Color.WHITE);
   l5.setOpaque(false);
   l5.setLocation(267,123);
   add(l5);
   l5.setVisible(true);

   l6 = new JLabel("Number of", JLabel.CENTER);
   l6.setSize(150,50);
   l6.setBackground(Color.BLACK);
   l6.setForeground(Color.WHITE);
   l6.setOpaque(false);
   l6.setLocation(300,462);
   add(l6);
   l6.setVisible(true);

   l6a = new JLabel("US Presidents", JLabel.CENTER);
   l6a.setSize(150,50);
   l6a.setBackground(Color.BLACK);
   l6a.setForeground(Color.WHITE);
   l6a.setOpaque(false);
   l6a.setLocation(300,475);
   add(l6a);
   l6a.setVisible(true);


  } // end of constructor method


/* There is only one paintComponent method in this class. the
   method draws for both bars.
*/

public void paintComponent(Graphics g)
   {
   super.paintComponent(g);

/* Note that both bars are repainted here even though
   only one bar may be moving.
*/

   /*********** bar 1 ****************/
   g.setColor(Color.BLUE);// myColor1 is a Color object
   g.fillRect(75,235-(bar1*4),100,(bar1*4));
   g.setColor(Color.WHITE);
   g.drawRect(75,235-(bar1*4),100,(bar1*4)); //black border

   g.fillRect(65,35,3,203); // y axis
   g.fillRect(65,235,120,3); //x axis

   g.fillRect(60,35,6,3); //top pip
   g.fillRect(60,134,6,3); //center pip

   /*********** bar 2 ****************/
   g.setColor(Color.RED);// myColor1 is a Color object
   g.fillRect(325,235-((bar2*200)/43),100,((bar2*200)/43));
   g.setColor(Color.WHITE);
   g.drawRect(325,235-((bar2*200)/43),100,((bar2*200)/43)); //black border

   g.fillRect(315,35,3,203); // y axis
   g.fillRect(315,235,120,3); //x axis

   g.fillRect(310,35,6,3); //top pip
   g.fillRect(310,134,6,3); //center pip




   }

public void stateChanged(ChangeEvent ce)
   {
   bar1 = j1.getValue();
   bar2 = j2.getValue();

/* Note that everything is repainted even though only
   one slider may be moving.
*/

  repaint(); //call the paintComponent method

/* NOTE: The repaint() metthod is the only way to call the paintComponent method. There is only
   one call to the repaint method in stateChanged. You don't call repaint for each bar. You
   call it only once at the end of the stateChanged method.
*/
   }//end of stateChanged

}//end of JSliderPanel class