JavaFX Slider with 2 different colors , for example green for selected area and red for unselected area

Question

What i want to achieve is the have a JavaFX Slider like the below :

I want the selected are to be green and the unselected area to be red :

Can this be done with let's say simple css because JavaFX is awesome i am sure it can but now how :_)

What i was doing till ....

Until now i was just adding a StackPane and behind that a ProgressBar , synchronized with the value of the Slider , what i mean? :)

, but hey now i need two colors and i have to create two ProgressBars in a StackPane with different colors (RED and Green) .... to much code ...

You could possibly make the progressbar's track green and keep the code you have. Look at this question and see if it helps: https://stackoverflow.com/questions/19417246/how-can-i-style-the-progressbar-component-in-javafx — MMAdams, Jul 05 '18 at 17:05
@MMAdams Not possible because the slider background is transparent now and that's why the backgound progress bar (with the red and white stripes is shown ) — GOXR3PLUS, Jul 05 '18 at 17:16
I don't see how the slider background being transparent precludes the progressbar background from having a color, it won't be striped like the other half, but it could be solid. — MMAdams, Jul 05 '18 at 17:37
@MMAdams Adam :) what i mean is . The slider has a transparent background . The progress bar is on the background as you can see on the 3rd image . Now i need to add one more progress bar , let's say an HBox behind the transparent bar with one bar red color and the other green color . I don't wanna do this , just i need to use CSS if is possible. — GOXR3PLUS, Jul 05 '18 at 17:42
check out this question for how to define a background with two different colors, you could use that for your slider, you'd just have to change the percent of each color as the slider is moved somehow, but it's doable: https://stackoverflow.com/questions/16200901/background-with-2-colors-in-javafx — MMAdams, Jul 05 '18 at 17:46
@James_D Hi James do you have a solution for this :) . I know you always doooo :) — GOXR3PLUS, Jul 05 '18 at 18:32
Possible duplicate of [How to change slider range background color using css?](https://stackoverflow.com/questions/49643143/how-to-change-slider-range-background-color-using-css) — kleopatra, Jul 06 '18 at 10:41
@kleopatra Hi Cleoparta :). Though similar that question is about how to make 5he thumb same color as filled track. I need two colors . If you can provide a modified answer that would be amazing. — GOXR3PLUS, Jul 06 '18 at 10:54
only on face-value: the part relevant to your context is the binding of the color before the thumb to that portion of the track. Simply adjust to use a color different from the thumb plus do the same for another color behind. — kleopatra, Jul 06 '18 at 12:10

score 2 · Accepted Answer · edited Sep 17 '18 at 12:36

1 slider and 2 progress bars , I will post below the .fxml code , .java code and the needed .css for look and feel :)

Any question feel free to answer :)

As for the code , this is created for XR3Player (Open Source Github Project)

.fxml:

<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.String?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.ProgressBar?>
<?import javafx.scene.control.Slider?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.StackPane?>


<fx:root prefHeight="389.0" prefWidth="228.0" style="-fx-background-color: #202020;" stylesheets="@../../style/application.css" type="StackPane" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/9.0.1">
   <children>
      <BorderPane fx:id="borderPane" minHeight="0.0" minWidth="0.0">
         <bottom>
            <StackPane minHeight="0.0" minWidth="0.0" BorderPane.alignment="CENTER">
               <children>
                  <HBox alignment="CENTER" maxHeight="-Infinity" minHeight="0.0" minWidth="0.0" prefHeight="15.0">
                     <children>
                        <ProgressBar fx:id="volumeProgress1" maxWidth="1.7976931348623157E308" minHeight="0.0" minWidth="0.0" mouseTransparent="true" prefHeight="15.0" progress="1.0" HBox.hgrow="ALWAYS">
                           <styleClass>
                              <String fx:value="transparent-progress-bar" />
                              <String fx:value="transparent-volume-progress-bar2-nostrip" />
                           </styleClass>
                        </ProgressBar>
                        <ProgressBar fx:id="volumeProgress2" layoutX="10.0" layoutY="10.0" maxWidth="1.7976931348623157E308" minHeight="0.0" minWidth="0.0" mouseTransparent="true" prefHeight="15.0" progress="1.0" HBox.hgrow="ALWAYS">
                           <styleClass>
                              <String fx:value="transparent-progress-bar" />
                              <String fx:value="transparent-volume-progress-bar3-nostrip" />
                           </styleClass>
                        </ProgressBar>
                     </children>
                  </HBox>
                  <Slider fx:id="masterVolumeSlider" majorTickUnit="15.0" max="150.0" maxWidth="1.7976931348623157E308" minorTickCount="55" value="75.0">
                     <styleClass>
                        <String fx:value="transparency-slider" />
                        <String fx:value="timer-slider" />
                     </styleClass>
                  </Slider>
               </children>
               <BorderPane.margin>
                  <Insets left="5.0" right="5.0" />
               </BorderPane.margin>
            </StackPane>
         </bottom>
      </BorderPane>
   </children>
</fx:root>

.java

import java.io.IOException;

import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.scene.control.ProgressBar;
import javafx.scene.control.Slider;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.StackPane;
import main.java.com.goxr3plus.xr3player.application.tools.InfoTool;

public class MixTabInterface extends StackPane {

    //--------------------------------------------------------------

    @FXML
    private BorderPane borderPane;

    @FXML
    private ProgressBar volumeProgress1;

    @FXML
    private ProgressBar volumeProgress2;

    @FXML
    private Slider masterVolumeSlider;

    // -------------------------------------------------------------

    /**
     * Constructor.
     */
    public MixTabInterface() {

        // ------------------------------------FXMLLOADER ----------------------------------------
        FXMLLoader loader = new FXMLLoader(getClass().getResource(InfoTool.PLAYERS_FXMLS + "MixTabInterface.fxml"));
        loader.setController(this);
        loader.setRoot(this);

        try {
            loader.load();
        } catch (IOException ex) {
            ex.printStackTrace();
        }

    }

    /**
     * Called as soon as fxml is initialized
     */
    @FXML
    private void initialize() {

        //masterVolumeSlider
        masterVolumeSlider.boundsInLocalProperty().addListener((observable , oldValue , newValue) -> calculateBars());
        masterVolumeSlider.valueProperty().addListener((observable , oldValue , newValue) -> {
            calculateBars();
        });
    }

    /**
     * Calculate bars positioning
     */
    private void calculateBars() {

        //Variables
        double value = masterVolumeSlider.getValue();
        double half = masterVolumeSlider.getMax() / 2;
        double masterVolumeSliderWidth = masterVolumeSlider.getWidth();

        //Progress Max1
        volumeProgress1.setProgress(1);
        volumeProgress2.setProgress(1);

        //Below is mind tricks
        if ((int) value == (int) half) {
            volumeProgress1.setMinWidth(masterVolumeSliderWidth / 2);
            volumeProgress2.setMinWidth(masterVolumeSliderWidth / 2);
        } else if (value < half) {
            double progress = 1.0 - ( value / half );
            double minimumWidth = masterVolumeSlider.getWidth() / 2 + ( masterVolumeSlider.getWidth() / 2 ) * ( progress );
            volumeProgress1.setMinWidth(masterVolumeSliderWidth - minimumWidth);
            volumeProgress1.setMaxWidth(masterVolumeSliderWidth - minimumWidth);
            volumeProgress2.setMinWidth(minimumWidth);
        } else if (value > half) {
            double progress = ( value - half ) / half;
            double minimumWidth = masterVolumeSlider.getWidth() / 2 + ( masterVolumeSlider.getWidth() / 2 ) * ( progress );
            volumeProgress1.setMinWidth(minimumWidth);
            volumeProgress2.setMinWidth(masterVolumeSliderWidth - minimumWidth);
            volumeProgress2.setMaxWidth(masterVolumeSliderWidth - minimumWidth);
        }

    }

    /**
     * @return the borderPane
     */
    public BorderPane getBorderPane() {
        return borderPane;
    }

    /**
     * @return the masterVolumeSlider
     */
    public Slider getMasterVolumeSlider() {
        return masterVolumeSlider;
    }

}

.css

.transparent-volume-progress-bar2-nostrip > .bar,.transparent-volume-progress-bar2-nostrip:indeterminate .bar,.transparent-volume-progress-bar2-nostrip:determinate .track,.transparent-volume-progress-bar2-nostrip:indeterminate .track{
    -fx-accent:rgb(0.0, 144.0, 255.0);
    -fx-background-color: -fx-accent;
    -fx-background-radius:0.0;
    -fx-border-radius:0.0;
}

.transparent-volume-progress-bar3-nostrip > .bar,.transparent-volume-progress-bar3-nostrip:indeterminate .bar,.transparent-volume-progress-bar3-nostrip:determinate .track,.transparent-volume-progress-bar3-nostrip:indeterminate .track{
    -fx-accent:#fc4f4f;
    -fx-background-color: -fx-accent;
    -fx-background-radius:0.0;
    -fx-border-radius:0.0;
}

.progress-bar > .bar {
    -fx-accent:firebrick;
    /*-fx-background-color:firebrick;*/
    -fx-background-color: linear-gradient(
        from 0.0px 0.75em to 0.75em 0.0px,
        repeat,
        -fx-accent 0.0%,
        -fx-accent 49.0%,
        derive(-fx-accent, 30.0%) 50.0%,
        derive(-fx-accent, 30.0%) 99.0%
    );

    -fx-background-insets: 3.0;
    -fx-padding: 0.2em;
}

.transparent-progress-bar:determinate .track,.transparent-progress-bar:indeterminate .track{
    -fx-background-color:rgb(0.0,0.0,0.0,0.5);
}

  /* .transparent-progress-bar */
.transparent-progress-bar > .bar,.transparent-progress-bar:indeterminate .bar{
    -fx-accent:firebrick;
}

JavaFX Slider with 2 different colors , for example green for selected area and red for unselected area

1 Answers1

Linked