如何使用css更改滑块范围背景颜色？

Question

我目前有一个滑块，我正在使用CSS设计样式。我想要的是拇指滑动时改变颜色的范围。与此图相似：

如何仅使用CSS执行此操作？以下是我到目前为止所尝试的内容。

.range-slider .range-bar {
-fx-background-color: red;
}

Answer 1

您可以使用linear-gradient作为轨道背景，并将渐变更改为滑块值的点绑定。基本思路是，例如，当滑块的值为50％时，背景应由

定义。

.slider .track {
    -fx-background-color: linear-gradient(to right, red 0%, red 50%, -fx-base 50%, -fx-base 100%);
}

但50%应根据滑块的值进行更改。

所以在CSS文件中定义以下内容（我介绍了一些额外的查找颜色，以便更容易修改样式）：

.slider {
    /* default track color: */
    -slider-filled-track-color: red ;
    -slider-track-color: -slider-filled-track-color ;
}

/* Make thumb same color as filled part of track */
.slider .thumb {
    -fx-background-color: -slider-filled-track-color ;
}

.slider .track {
    -fx-background-color: -slider-track-color ;
}

然后你可以做

    slider.styleProperty().bind(Bindings.createStringBinding(() -> {
        double percentage = (slider.getValue() - slider.getMin()) / (slider.getMax() - slider.getMin()) * 100.0 ;
        return String.format("-slider-track-color: linear-gradient(to right, -slider-filled-track-color 0%%, "
                + "-slider-filled-track-color %f%%, -fx-base %f%%, -fx-base 100%%);", 
                percentage, percentage);
    }, slider.valueProperty(), slider.minProperty(), slider.maxProperty()));

将颜色更改的位置绑定到滑块的值。

这是一个SSCCE：

import javafx.application.Application;
import javafx.beans.binding.Bindings;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Slider;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class SliderStyleTest extends Application {

    private static final String SLIDER_STYLE_FORMAT = 
            "-slider-track-color: linear-gradient(to right, -slider-filled-track-color 0%%, "
                    + "-slider-filled-track-color %1$f%%, -fx-base %1$f%%, -fx-base 100%%);";

    @Override
    public void start(Stage primaryStage) {
        Slider slider = new Slider();
        slider.styleProperty().bind(Bindings.createStringBinding(() -> {
            double percentage = (slider.getValue() - slider.getMin()) / (slider.getMax() - slider.getMin()) * 100.0 ;
            return String.format(SLIDER_STYLE_FORMAT, percentage);
        }, slider.valueProperty(), slider.minProperty(), slider.maxProperty()));

        StackPane root = new StackPane(slider);
        root.setPadding(new Insets(10));
        Scene scene = new Scene(root);
        scene.getStylesheets().add("style.css");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

其中style.css只是上面的CSS文件。这给出了：