5 Replies Latest reply: Apr 12, 2012 6:55 PM by David Grieve RSS

    how can I set the different background color for slider?

    928280
      Hi,
      I'd like to set different color for Slider track ,Slider track is spitted into two sections by slider-button.
      I want to set left one gray,the right one white.
      Below css only changes the whole track background,but how can I change different background color for slider?
      Any suggestion?
      .slider {
          -fx-border-width: 0;
      }
      .slider *.track {
          -fx-background-color:white;
          -fx-background-insets:  0, 1;
          -fx-border-color: #faf0e6;
          -fx-border-width: 1;
          -fx-border-style:solid;
          -fx-progress-color:yellow;
          -fx-border-radius: 20;
      }
      .slider.knobStyle:focused .knob {
          -fx-effect: dropshadow( three-pass-box , red , 5 , 0.5 , 0 , 0 );
      }
      .slider.knobStyle:unfocused .knob {
          -fx-effect: dropshadow( three-pass-box , red , 5 , 0.5 , 0 , 0 );
      }
      .slider .thumb {
           -fx-background-color:rgb(224,225,226);
           -fx-background-repeat:stretch;
           -fx-background-size:stretch;
           -fx-background-position:center top;
           -fx-background-image:url("../images/volume_ball.png");
              -fx-padding: 10;
      }
        • 1. Re: how can I set the different background color for slider?
          David Grieve
          You can try a linear-gradient that starts at gray 0% and ends at white <whatever the percentage the thumb is at>.
                  final Node track = slider.lookup(".track");
                  slider.valueProperty().addListener(new ChangeListener<Number>() {
                      public void changed(ObservableValue<? extends Number> ov, Number t, Number t1) {
                          double pct = (t1.doubleValue()-slider.getMin())/(slider.getMax()-slider.getMin())*100;
                          track.setStyle("-fx-background-color: linear-gradient(to right, gray, gray " + pct + "%, white" + pct + "%, white);");
                      }
                  });
          Edited by: dgrieve on Apr 12, 2012 12:19 PM
          • 2. Re: how can I set the different background color for slider?
            928280
            Hi,
            final Node track = slider.lookup(".track"); 
            final Node thumb= slider.lookup(".thumb"); 
            I don't know why I can't get the track node,track is always null,and thumb either.
            • 3. Re: how can I set the different background color for slider?
              jsmith
              I don't know why I can't get the track node,track is always null,and thumb either.
              Are you doing the lookup after the slider has been shown on an active scene?

              (e.g. after you have added the slider to a scene, set the scene for the stage, then called stage.show())
              • 4. Re: how can I set the different background color for slider?
                David Grieve
                Try this
                        slider.valueProperty().addListener(new ChangeListener<Number>() {
                
                            public void changed(ObservableValue<? extends Number> ov, Number t, Number t1) {
                                Node track = slider.lookup(".track");
                                if (track != null) {
                                    double pct = (t1.doubleValue() - slider.getMin()) / (slider.getMax() - slider.getMin()) * 100;
                                    track.setStyle("-fx-background-color: linear-gradient(to right, red, red " + pct + "%, yellow " + pct + "%, yellow);");
                                }
                            }
                        });