Hey all I am trying to figure out how to transform my JavaFX slider switch to a Scene Builder 2.0 control so that I can use it within scene Builder.

I currently have been watching these 2 YouTube videos:

To make the slider switch:
Youtube Vid #1

To create a scene builder control:
Youtube Vid #2

The issue with the 2 YouTube videos above is that it shows how to do this with first starting out designing it within Scene Builder 2.0 which is not the way I did it when following the first YouTube video.
So is there a way to transfer what I have in java to the Scene Builder to create the control?

My complete slider switch code:

package application;
    
import javafx.application.Application;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.animation.FillTransition;
import javafx.animation.ParallelTransition;
import javafx.animation.TranslateTransition;
import javafx.beans.binding.Bindings;
import javafx.beans.property.BooleanProperty;
import javafx.beans.property.SimpleBooleanProperty;
import javafx.scene.Parent;
import javafx.scene.effect.DropShadow;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.scene.shape.Rectangle;
import javafx.scene.text.Font;
import javafx.scene.text.FontSmoothingType;
import javafx.scene.text.FontWeight;
import javafx.scene.text.Text;
import javafx.scene.text.TextAlignment;
import javafx.util.Duration;

public class Main extends Application {
    static Text text;
    static Pane root = new Pane();
    
    private Parent createContent() {
        root.setPrefSize(300, 300);
        TranslateTransition translateAnimation2 = new TranslateTransition(Duration.seconds(0.25));
        ParallelTransition animation2 = new ParallelTransition(translateAnimation2);
        Rectangle bg = new Rectangle(300, 300);
        ToggleSwitch toggle = new ToggleSwitch();

        toggle.setTranslateX(100);
        toggle.setTranslateY(100);
        text.setTranslateX(toggle.getTranslateX());
        text.setTranslateY(toggle.getTranslateY() + 9);
        translateAnimation2.setNode(text);
        root.getChildren().addAll(toggle, text);
        
        return root;
    }

    private static class ToggleSwitch extends Parent {
        private BooleanProperty switchedOn = new SimpleBooleanProperty(false);
        private TranslateTransition translateAnimation = new TranslateTransition(Duration.seconds(0.25));
        private TranslateTransition translateAnimation2 = new TranslateTransition(Duration.seconds(0.25));
        private FillTransition fillAnimation = new FillTransition(Duration.seconds(0.25));
        private ParallelTransition animation = new ParallelTransition(translateAnimation, fillAnimation);
        private ParallelTransition animation2 = new ParallelTransition(translateAnimation2);
        
        public BooleanProperty switchedOnProperty() {
            return switchedOn;
        }

        public boolean checkSwitch() {
            switchedOn.set(!switchedOn.get());
            return switchedOn.get();
        }

        public ToggleSwitch() {
            Rectangle background = new Rectangle(30, 10);
            background.setArcWidth(10);
            background.setArcHeight(10);
            background.setFill(Color.rgb(255, 161, 161));
            background.setStroke(Color.SLATEGREY);

            Circle trigger = new Circle(10);
            trigger.setCenterX(8);
            trigger.setCenterY(6);
            trigger.setFill(Color.rgb(245, 245, 245));
            trigger.setStroke(Color.SLATEGREY);

            DropShadow shadow = new DropShadow();
            shadow.setRadius(2);
            trigger.setEffect(shadow);
            
            text = new Text();
            text.setFont(Font.font("Verdana", FontWeight.MEDIUM, 8));
            text.setFill(Color.rgb(0, 0, 0));
            text.setTextAlignment(TextAlignment.CENTER);
            text.setFontSmoothingType(FontSmoothingType.LCD);
            text.textProperty().bind(Bindings.when(switchedOnProperty()).then("ON").otherwise("OFF"));
            text.setOnMouseClicked(e -> {
                switchedOn.set(!switchedOn.get());
            });

            translateAnimation.setNode(trigger);
            translateAnimation2.setNode(text);
            
            fillAnimation.setShape(background);

            getChildren().addAll(background, trigger);
            
            switchedOn.addListener((obs, oldState, newState) -> {
                boolean isOn = newState.booleanValue();
                
                translateAnimation.setToX(isOn ? 45 - 30 : 0);
                translateAnimation2.setToX(isOn ? this.getTranslateX() + 17 : this.getTranslateX());
                fillAnimation.setFromValue(isOn ? Color.rgb(255, 161, 161) : Color.rgb(156, 240, 168));
                fillAnimation.setToValue(isOn ? Color.rgb(156, 240, 168) : Color.rgb(255, 161, 161));
                animation.play();
                animation2.play();
            });

            setOnMouseClicked(event -> {
                switchedOn.set(!switchedOn.get());
            });
        }
    }

    @Override
    public void start(Stage primaryStage) throws Exception {
        primaryStage.setScene(new Scene(createContent()));
        primaryStage.show();
    }
    
    public static void main(String[] args) {
        launch(args);
    }
}