sliderのtrackの色をセットしたいのですが、やり方がわかりません。

Question

javaFXを勉強しています。
下記のようなスライダープログラムで、sliderのtrackの色をセットしたいのですが、やり方がわかりません。
BorderPane root = new BorderPane();
root.setStyle("-fx-background-color: yellow");で背景の設定は出来ました。
trackの色をセットしようと思いネットでmy-style.cssというコードをみつけましたが、
Main.javaにsliderR.getStylesheets().add("my-style.css");と書き込んだのですが
うまくいきません。どうしたらいいか教えてくださいお願いいたします。
Main.javaに直接設定する方法がありましたら、そちらもお願いいたします。

//Main.java
package application;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.control.Label;
import javafx.scene.control.Menu;
import javafx.scene.control.MenuBar;
import javafx.scene.control.MenuItem;
import javafx.scene.control.Slider;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.stage.Stage;

public class RGBColor extends Application {

	Slider sliderR = new Slider(0, 255, 128);
	Slider sliderG = new Slider(0, 255, 128);
	Slider sliderB = new Slider(0, 255, 128);

	Canvas canvas = new Canvas(600,80);

  	@Override
  	public void start(Stage stage) throws Exception {

  		stage.setTitle("RGBColor");
  		stage.setWidth(400);
  		stage.setHeight(280);

  		MenuBar menuBar = new MenuBar();
  		menuBar.setUseSystemMenuBar(true);


  		Menu fileMenu = new Menu("File");
  		MenuItem mnuExit = new MenuItem("Exit");
  		mnuExit.setOnAction(event -> System.exit(0));

  		fileMenu.getItems().addAll(mnuExit);
  		menuBar.getMenus().add(fileMenu);

  		// Redラベルとスライダー
  		Label lblR = new Label(" Red：");

  		lblR.setTextFill(Color.rgb(255, 0, 0));
  		// Label label = new Label("LABEL");
  		// label.setFont(Font.font("Verdana", FontWeight.BOLD, 32));
  		// label.setTextAlignment(TextAlignment.CENTER);
  		// label.setText("NEW LABEL");

  		sliderR.setMaxWidth(380);

  		sliderR.getStylesheets().add("my-style.css");

  		sliderR.setShowTickMarks(true);
  		// 値がfalseだと、区切り線がなくなります。

  		sliderR.setShowTickLabels(true);
  	    // 値がfalseだと、数字がなくなります。

  		sliderR.setMajorTickUnit(64.0);

  		sliderR.setBlockIncrement(1.0);

  		sliderR.setOnKeyPressed(event -> updateColor());

  		sliderR.setOnMouseMoved(event -> updateColor());

  		// Greenラベルとスライダー
  		Label lblG = new Label(" Green：");

  		lblG.setTextFill(Color.rgb(0, 255, 0));

  		sliderG.setMaxWidth(380);

  		sliderG.setShowTickMarks(true);

  		sliderG.setShowTickLabels(true);

  		sliderG.setMajorTickUnit(64.0);

  		sliderG.setBlockIncrement(1.0);

  		sliderG.setOnKeyPressed(event -> updateColor());

  		sliderG.setOnMouseMoved(event -> updateColor());

  		// Blueラベルとスライダー
  		Label lblB = new Label(" Blue：");

  		lblB.setTextFill(Color.rgb(0, 0, 255));

  		sliderB.setMaxWidth(380);

  		sliderB.setShowTickMarks(true);

  		sliderB.setShowTickLabels(true);

  		sliderB.setMajorTickUnit(64.0);

  		sliderB.setBlockIncrement(1.0);

  		sliderB.setOnKeyPressed(event -> updateColor());

  		sliderB.setOnMouseMoved(event -> updateColor());

  		VBox panel = new VBox();

  		panel.getChildren().addAll(lblR, sliderR, lblG, sliderG,lblB, sliderB);

  		BorderPane root = new BorderPane();

  		root.setStyle("-fx-background-color: yellow");

  		root.setTop(menuBar);

  		root.setCenter(panel);

  		updateColor();

  		stage.setScene(new Scene(root));

  		stage.show();
  	}

  	void updateColor(){

  		Color col = Color.rgb(

  			(int)sliderR.getValue(),

  			(int)sliderG.getValue(),

  			(int)sliderB.getValue()	);
  		GraphicsContext gc = canvas.getGraphicsContext2D();

  		gc.setFill(col);

  		gc.fillRect(0,0,660,80);

  	}

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

// my-style.css
 /* Styling the slider track */
.jfx-slider > .track {
     -fx-background-color: yellow;
}

/* Styling the slider thumb */
.jfx-slider > .thumb {
     -fx-background-color: green;
}

/* Styling the filled track */
.jfx-slider > .colored-track {
     -fx-background-color: green;
}

/* Styling the animated thumb */
.jfx-slider > .animated-thumb {
     -fx-background-color: green;
}

/* Styling the slider value text inside animated thumb */
.jfx-slider .slider-value {
     -fx-fill: white;
     -fx-stroke: white;
}

Comments

[liveasnotes]

Javaのコードは同じものなら，下に書かれている部分は消してください．あとCSSもコードブロックで囲えるので，一応囲っておいてください

[退会済みユーザー]

すみません。修正させていただきました。

[liveasnotes]

ああ，JSとCSSは分けといてください．

Answer 1

Main.javaとスタイルシートは同じ階層（フォルダ/ディレクトリ）に入っていますか？

もしそうでなければ，パスは相対パスで記述してください

• いまさら聞けない絶対パスと相対パス Win/Mac
• 絶対パス、相対パス、ルートパスの違いってなに？メリット・デメリットは？

---

追記（20180902）

JavaFXは触ったことがないので，確実な回答ができませんが，

2016年の記事ですが，「JavaFX アプリケーションを素敵に着飾ってみる」の
・classとid
・自作の Control に独自のスタイルクラスは設定できるか？

などは参考にならないでしょうか？

また，2015年の投稿ですが
JavaFX　StyleSheetが効かない　（Java学習中）の質問にあるコードは，FXML・CSSの当て方のヒントになるかと思います（∵それらしき記述があり，かつコードが簡潔）

あと，CSSの方はおかしそうに見えませんので，
適用に成功した部分（root.setStyle("-fx-background-color: yellow");）の部分を

// my-style.css
 /* Styling the slider track */
.jfx-slider > .track {
     -fx-background-color: yellow;
}

/* Styling the slider thumb */
.jfx-slider > .thumb {
     -fx-background-color: green;
}

/* Styling the filled track */
.jfx-slider > .colored-track {
     -fx-background-color: green;
}

/* Styling the animated thumb */
.jfx-slider > .animated-thumb {
     -fx-background-color: green;
}

/* Styling the slider value text inside animated thumb */
.jfx-slider .slider-value {
     -fx-fill: white;
     -fx-stroke: white;
}

のプロパティのどれかに書き換えてみてはどうでしょう？
（例：root.setStyle("-fx-background-color: green");）
それで大丈夫なら，セレクタ（例：.jfx-slider > .animated-thumb）の書き方がおかしい可能性がありますが，私の知識では，JavaFXのコードから要素の構成やクラスの付与状態が確認できないため，何とも言えません．（コピペではなく，自分で考えて書いた部分であるなら，どのような考えに基づいてそのセレクタを書いたのかを説明してもらえると，何か分かるかもしれません．もしコピペなら配布元の説明を頑張って読みましょう）

Comments

[退会済みユーザー]

ありがとうございます。Main.javaとスタイルシートは同じ階層（フォルダ/ディレクトリ）に入っています。
スタイルシートはよくわからないので、そちらがうまく書けていない気がします。とりあえず、
Redスライダーのtrackをredにして、進んでいないところをyellowにしたいのですが、よろしくお願いいたします。

[退会済みユーザー]

とりあえず、Sliderは作れるようになったので、先に進みます。もう少し勉強していれば分かるようになると思いますので。ありがとうございます。