具有 2 种不同颜色的 JavaFX 滑块，例如选定区域为绿色，未选定区域为红色

Question

我想要实现的是拥有一个如下所示的 JavaFX 滑块：

我希望选定区域为绿色，未选定区域为红色：

这可以用简单的 css 来完成吗，因为 JavaFX 很棒，我相信它可以，但现在如何:_)

---

我在做什么直到 ....

直到现在我只是添加一个 StackPane 并在其后面添加一个 ProgressBar ，与 Slider 的值同步，我的意思是什么？ :)

，但是嘿，现在我需要两种颜色，我必须在 StackPane 中创建两个不同颜色（红色和绿色）的 ProgressBars .... 很多代码...

Answer 1

1个滑块和2个进度条，下面我会贴出.fxml代码，.java代码和需要的.css看看和感觉:)

任何问题都可以回答:)

至于代码，这是为XR3Player（开源Github项目）创建的

.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;
}