JavaFX에서 두 개의 엄지(썸)를 가진 슬라이더 만드는 방법

일반적으로 슬라이더(Slider)는 연속적인 값의 범위를 표시하는 컴포넌트입니다. 슬라이더에는 숫자 값이 표시되는 트랙(track)이 있으며, 트랙 위에는 해당 숫자를 가리키는 엄지(thumb)가 배치됩니다. 슬라이더를 생성할 때 최솟값, 최댓값 그리고 초기값을 직접 지정해 줄 수 있습니다.

기본 JavaFX 슬라이더의 한계

JavaFX에서 기본적으로 제공하는 슬라이더는 엄지(썸)가 하나뿐입니다. 따라서 시작 값과 끝 값을 동시에 선택할 수 있는 두 개의 엄지를 가진 범위 슬라이더를 만들려면 외부 라이브러리인 org.controlsfx.control 패키지를 사용해야 합니다.

ControlsFX 라이브러리 추가하기

Maven 프로젝트라면 아래 의존성(Dependency)을 pom.xml에 추가하여 라이브러리를 사용할 수 있습니다.

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

RangeSlider 클래스 사용하기

이 패키지의 RangeSlider 클래스는 기본 JavaFX 슬라이더에 엄지가 두 개 추가된 형태입니다. 즉, 사용자가 범위의 시작점과 끝점을 각각 조절할 수 있습니다. 이 클래스를 인스턴스화한 후 필요한 속성을 설정하고 노드(Node) 객체에 추가하면 됩니다.

생성자는 다음과 같은 순서로 값을 받습니다: new RangeSlider(minValue, maxValue, lowValue, highValue)

예제 코드

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 scene = new Scene(vbox, 600, 200);
        stage.setTitle("Slider Example");
        stage.setScene(scene);
        stage.show();
    }
    public static void main(String args[]){
        launch(args);
    }
}

위 예제에서는 0부터 100 사이의 범위에서 하한값 10, 상한값 90을 초기값으로 설정했습니다. 또한 눈금(tick)과 눈금 레이블을 표시하고, 주 눈금 단위를 25, 블록 증가량을 10으로 지정했습니다.

실행 결과: