วิธาสร้าง JavaFX Slider ที่มีสอง Thumb

โดยทั่วไป สไลเดอร์เป็นคอมโพเนนต์ที่แสดงช่วงค่าต่อเนื่อง ประกอบด้วย track ที่แสดงค่าตัวเลข ตาม track จะมี thumb ชี้ไปที่ตัวเลข คุณสามารถระบุค่าสูงสุด ต่ำสุด และค่าเริ่มต้นของสไลเดอร์ได้

สไลเดอร์ที่ JavaFX มอบมา มีเพียง thumb เดียว หากคุณต้องการสร้างสไลเดอร์ที่มีสอง thumb คุณต้องพึ่งพาไลบรารีภายนอกชื่อ org.controlsfx.control

Dependency สำหรับไลบรารีนี้ใน Maven:

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

คลาส RangeSlider ของแพ็กเกจนี้คือ JavaFX Slider แต่มีสอง thumb ดังนั้นเพื่อใช้งาน ให้สร้างอินสแตนซ์ของคลาสนี้ เพิ่มแอตทริบิวต์ที่ต้องการ เพิ่มเข้าไปในออบเจ็กต์ 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 scene = new Scene(vbox, 600, 200);
        stage.setTitle("Slider Example");
        stage.setScene(scene);
        stage.show();
    }
    
    public static void main(String args[]) {
        launch(args);
    }
}

ผลลัพธ์: