如何使用css更改滑块范围背景颜色？ [英] How to change slider range background color using css?

问题描述

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

I currently have a slider that I am styling with CSS. What I want is the range to change color when the thumb is slid. Similar to this picture:

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

How can I do this using only CSS? Below is what I have tried so far.

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

推荐答案

你可以这样做轨道背景的线性渐变，并将渐变更改为滑块值的点绑定。基本思路是，例如，当滑块的值为50％时，背景应由

You can do this by using a linear-gradient for the track background, and binding the point where the gradient changes to the slider's value. The basic idea would be that when, e.g., the slider's value is at 50%, the background should be defined by

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

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

but the 50% should change according to the slider's value.

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

So define the following in a CSS file (I introduced some extra looked-up colors to make it easier to modify the style):

.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()));

将颜色变化的位置绑定到滑块的值。

to bind the place where the color changes to the value of the slider.

这是一个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文件。这给出了：

where style.css is just the CSS file above. This gives:

这篇关于如何使用css更改滑块范围背景颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！