Change progressbar colour based on slider's value JavaFX

Question

I already took help of this previous answer but I still have a problem

I want to change the colour of progressbar as slider's value changes , but my progressbar stays always in RED colour and doesn't change if it goes beyond 2,4,6. What am I missing here ? (value : min is 0 and max is 10)

slider is id of slider and pbar is id of progressbar.

piece of code :

private static final String RED_BAR    = "red-bar";
private static final String YELLOW_BAR = "yellow-bar";
private static final String ORANGE_BAR = "orange-bar";
private static final String GREEN_BAR  = "green-bar";
private static final String[] barColorStyleClasses = { RED_BAR, ORANGE_BAR, YELLOW_BAR, GREEN_BAR };
public void initialize(URL location, ResourceBundle resources) {
   slider.valueProperty().addListener(new ChangeListener<Number>() {
        public void changed(ObservableValue<? extends Number> ov, Number old_val, Number new_val) {
            pbar.setProgress(new_val.doubleValue()/10);
        }
    });

    pbar.progressProperty().addListener(new ChangeListener<Number>() {
        @Override public void changed(ObservableValue<? extends Number> observable, Number oldValue, Number newValue) {
            double progress = newValue == null ? 0 : newValue.doubleValue();
            if (progress < 2) {
                setBarStyleClass(pbar, RED_BAR);
            } else if (progress < 4) {
                setBarStyleClass(pbar, ORANGE_BAR);
            } else if (progress < 6) {
                setBarStyleClass(pbar, YELLOW_BAR);
            } else {
                setBarStyleClass(pbar, GREEN_BAR);
            }
        }
        private void setBarStyleClass(ProgressBar bar, String barStyleClass) {
            bar.getStyleClass().removeAll(barColorStyleClasses);
            bar.getStyleClass().add(barStyleClass);
        }
    });
}

CSS file :

.root { -fx-background-color: cornsilk; -fx-padding: 15; }
.pbar { -fx-box-border: goldenrod; }
.green-bar  { -fx-accent: green;  }
.yellow-bar { -fx-accent: yellow; }
.orange-bar { -fx-accent: orange; }
.red-bar    { -fx-accent: red;    }

score 2 · Accepted Answer · answered Apr 03 '17 at 16:09

2

The progress bar's progress ranges between 0 and 1, so the condition in the first if clause will always be true. (The slider's value ranges between 0 and 10, but you set the progress bar's progress to that value divided by 10, and the listener changing the style is responding to that value, not the slider's value.)

You presumably need to test against 0.2, 0.4, etc., or register the second listener with the slider's value instead of the progress bar's progress.

answered Apr 03 '17 at 16:09

James_D

201,275
16
291
322

tysm :) . I thought when we set min max value in fxml ,range changes. this worked – minigeek Apr 03 '17 at 16:24
@minigeek The range of the slider does change, but you set the min and max on the slider, not on the progress bar. And you only call `setProgress(...)` with values in the range 0-1 anyway... – James_D Apr 03 '17 at 16:25
oh yeah... that's true. while coding i thought about slider instead of pbar, you are right ! – minigeek Apr 03 '17 at 16:26

Change progressbar colour based on slider's value JavaFX

1 Answers1