【JavaFX】2つのつまみを持つスライダー（RangeSlider）を作成する方法

スライダーとは、連続した値の範囲を視覚的に表示するためのUIコンポーネントです。トラック上には数値が表示されており、その値を指し示す「つまみ（サム）」がトラックに沿って移動します。スライダーには最大値・最小値・初期値を自由に設定することができます。

標準のJavaFXスライダーの限界

JavaFXが標準で提供するスライダーには、つまみは1つしかありません。最小値と最大値の両方を選択できる「2つのつまみを持つスライダー」を作成したい場合は、外部ライブラリである org.controlsfx.control を利用する必要があります。

手順1：Maven依存関係を追加する

このライブラリを使用するには、まずプロジェクトのpom.xmlに以下のMaven依存関係を追加します。

<dependency>
    <groupId>org.controlsfx</groupId>
    <artifactId>controlsfx</artifactId>
    <version>11.0.1</version>
</dependency>

RangeSliderクラスによる実装

このパッケージに含まれる RangeSlider クラスは、いわば「つまみが2つになったJavaFXスライダー」です。基本的な使い方は以下の3ステップです。

1. インスタンスの生成：コンストラクタに最小値・最大値・下限側の初期値・上限側の初期値を渡します。
2. プロパティの設定：目盛りや目盛りラベルの表示、増分などを必要に応じて設定します。
3. 画面への追加：生成したスライダーをVBoxなどのNodeオブジェクトに追加します。

コード例

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
import org.controlsfx.control.RangeSlider;

public class SliderTwoThumbs extends Application {
    public void start(Stage stage) {
        // RangeSliderクラスのインスタンスを生成
        RangeSlider slider = new RangeSlider(0, 100, 10, 90);

        // スライダーのプロパティを設定
        slider.setShowTickLabels(true);
        slider.setShowTickMarks(true);
        slider.setMajorTickUnit(25);
        slider.setBlockIncrement(10);

        // スライダーを配置するためのVBox
        VBox vbox = new VBox();
        vbox.setPadding(new Insets(75));
        vbox.setSpacing(150);
        vbox.getChildren().addAll(slider);

        // シーンの準備とウィンドウの表示
        Scene scene = new Scene(vbox, 600, 200);
        stage.setTitle("Slider Example");
        stage.setScene(scene);
        stage.show();
    }

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

実行結果：

まとめ

ControlsFXのRangeSliderクラスを使えば、標準APIだけでは実現できない「2つのつまみによる範囲選択スライダー」を、通常のスライダーとほぼ同じ要領で実装できます。価格帯の絞り込みや期間指定など、ユーザーに範囲を選択させたい場面で非常に役立つコンポーネントなので、ぜひ活用してみてください。