[FIXED] I have met a issue with changing JavaFX Slider tick font type using style propery

Issue

I am tring to setup Slider tick font mannually through the following fxml code. All other parts in the fxml worked very well on my Mac except the Slider part, which fails to load the font correctly everytime. I have googled the issue, and only found out the suspected issue might come from subtructure of Slider called axis. But there is no example for how to mannuly change the axis properties in fxml. enter image description here

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

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.VBox?>

<?import javafx.scene.control.Button?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.text.Font?>
<?import javafx.scene.control.RadioButton?>
<?import javafx.scene.control.ToggleGroup?>
<?import javafx.scene.control.CheckBox?>
<?import javafx.scene.control.ToggleButton?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.text.Text?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.control.PasswordField?>
<?import javafx.scene.control.ComboBox?>
<?import javafx.collections.*?>
<?import java.lang.String?>

<?import javafx.scene.control.ChoiceBox?>
<?import javafx.scene.control.Slider?>
<?import javafx.scene.control.Spinner?>
<GridPane fx:controller="com.example.controls.HelloController"
          xmlns:fx="http:/javafx.com/xml"
          alignment="center"
          hgap="10" vgap="10">
    <Button GridPane.rowIndex="0" GridPane.columnIndex="0" text="Click Me">
        <font>
            <Font name="Times New Roman" size="12"/>
        </font>
        <graphic>
            <ImageView>
                <Image url="@/toolbarButtonGraphics/general/TipOfTheDay24.gif"/>
            </ImageView>
        </graphic>
    </Button>
    <Label GridPane.rowIndex="0" GridPane.columnIndex="1" text="This is a label"
           textFill="blue" WrapText="true">
        <font>
            <Font name="Arial italic" size="12"/>
        </font>
        <graphic>
            <ImageView>
                <Image url="@/toolbarButtonGraphics/general/Information24.gif"/>
            </ImageView>
        </graphic>
    </Label>

    <fx:define>
        <ToggleGroup fx:id="colorToggleGroup"/>
    </fx:define>

    <VBox GridPane.rowIndex="0" GridPane.columnIndex="2" style="-fx-font-family: 'PingFang SC'">
        <RadioButton text="Red" toggleGroup="$colorToggleGroup"/>
        <RadioButton text="Blue" toggleGroup="$colorToggleGroup" selected="true"/>
        <RadioButton text="Green" toggleGroup="$colorToggleGroup"/>
    </VBox>

    <VBox GridPane.rowIndex="0" GridPane.columnIndex="3" style="-fx-font-family: 'PingFang SC'" spacing="2">
        <CheckBox text="Dog" indeterminate="true"/>
        <CheckBox text="Cat" indeterminate="true"/>
        <CheckBox text="Bird" indeterminate="true"/>
    </VBox>

    <fx:define>
        <ToggleGroup fx:id="buttonToggleGroup"/>
    </fx:define>

    <HBox GridPane.rowIndex="0" GridPane.columnIndex="4"
          style="-fx-font-family: 'PingFang SC'; -fx-border-style: dashed" spacing="1"
          alignment="center">
        <ToggleButton text="Hello!" toggleGroup="$buttonToggleGroup"/>
        <ToggleButton text="Goodbye!" toggleGroup="$buttonToggleGroup"/>
        <ToggleButton text="Nice Day!" toggleGroup="$buttonToggleGroup"/>
    </HBox>

    <TextField GridPane.rowIndex="1" GridPane.columnIndex="0"
               style="-fx-font-family: 'PingFang SC'"/>
    <Label text="Regular TextField" GridPane.rowIndex="2" GridPane.columnIndex="0" style="-fx-font-family: 'PingFang SC'"/>
    <PasswordField GridPane.rowIndex="1" GridPane.columnIndex="1"
               style="-fx-font-family: 'PingFang SC'"/>
    <Label text="Password Field" GridPane.rowIndex="2" GridPane.columnIndex="1" style="-fx-font-family: 'PingFang SC'"/>

    <ComboBox GridPane.rowIndex="2" GridPane.columnIndex="2" GridPane.columnSpan="2"
              style="-fx-border-style: dashed; -fx-font-family: 'PingFang SC'">
        <items>
            <FXCollections fx:factory="observableArrayList">
                <String fx:value="This is the long Option 1"/>
                <String fx:value="Option 2"/>
                <String fx:value="Option 3"/>
                <String fx:value="Option 4"/>
                <String fx:value="Option 5"/>
            </FXCollections>
        </items>
        <value>
            <String fx:value="Option 2"/>
        </value>
    </ComboBox>

    <ChoiceBox GridPane.rowIndex="2" GridPane.columnIndex="4" style="-fx-font-family: 'PingFang SC'">
        <items>
            <FXCollections fx:factory="observableArrayList">
                <String fx:value="This is the long Option 1"/>
                <String fx:value="Option 2"/>
                <String fx:value="Option 3"/>
                <String fx:value="Option 4"/>
                <String fx:value="Option 5"/>
            </FXCollections>
        </items>
    </ChoiceBox>
    <Slider GridPane.rowIndex="3" GridPane.columnIndex="0"
            showTickLabels="true" showTickMarks="true" GridPane.columnSpan="3"
            minorTickCount="4"
            snapToTicks="true"
            style="-fx-font-family: 'PingFang SC'"/>
    <Spinner GridPane.rowIndex="3" GridPane.columnIndex="4"
             style="-fx-font-family: 'PingFang SC'"
             min="0" max="20" initialValue="50">
    </Spinner>

</GridPane>

Here is the HelloApplicaion.java file for running the test app.

package com.example.controls;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.scene.text.Font;

import java.io.IOException;
import java.util.List;

public class HelloApplication extends Application {
    @Override
    public void start(Stage stage) throws IOException {
        FXMLLoader fxmlLoader = new FXMLLoader(HelloApplication.class.getResource("hello-view.fxml"));
        Scene scene = new Scene(fxmlLoader.load(), 800, 500);
        stage.setTitle("Hello!");
        stage.setScene(scene);
        stage.show();
    }

    public static void main(String[] args) {
        launch();
//        printFont(Font.getFontNames());
    }

    public static void printFont(List<String> list) {
        for(String item: list) {
            System.out.println(item);
        }
    }
}

Solution

You must use CSS in a style sheet to style the tick labels of a slider.

Here the slider font is changed to make it larger than the default (12px instead of 8px) and use a monospaced font rather than the default system font.

The tick mark labels in the slider are part of an axis within the slider. The axis can be styled using the -fx-tick-label-font style properties, with appropriate extensions to the CSS attribute name for the thing you are trying to style (e.g. the size or font family). This is documented (to a greater or lesser extent) in the CSS reference guide, and also demonstrated in the modena.css file in the JavaFX controls jar that ships with your JavaFX installation.

Example FXML file.

<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Slider?>
<Slider 
        minorTickCount="4" 
        prefHeight="37.0" 
        prefWidth="157.0" 
        showTickLabels="true" 
        showTickMarks="true" 
        snapToTicks="true" 
        styleClass="custom-slider" 
        stylesheets="@slider.css" 
        xmlns="http://javafx.com/javafx/18" xmlns:fx="http://javafx.com/fxml/1"/>

Example CSS file.

.custom-slider .axis {
    -fx-tick-label-font-size: 12px;
    -fx-tick-label-font-family: monospace;
}

Answered By - jewelsea
Answer Checked By - Marie Seifert (JavaFixing Admin)