如何使用 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 文件。这给出了：