create custom component for javafx scene builder - javafx

Question

I've searched the entire web (metaphorically) to find an explanation on how to create the jar file that can then be imported by the scene builder to add extra, custom components. Currently, I am trying to create a slider with a textField that displays it's value, with a biDirectional link using a NumberStringConverter. I have the classes all setup, but now I need to bundle them in a jar file, and that's the part that doesn't work for me. These are the classes:
FXML:
<fx:root type="javafx.scene.layout.HBox" xmlns="http://javafx.com/javafx"
xmlns:fx="http://javafx.com/fxml" fx:controller="main.java.valueSlider">
<Slider fx:id="slider" HBox.hgrow="ALWAYS"/>
<Label fx:id="label" text="value"/>
</fx:root>
Now I can just import this FXML file and use it as a shortcut to create a slider with a label, but I want there to be a controller involved for the biDirectional link. This is the controller class:
public class valueSlider extends HBox {
#FXML
private TextField value;
#FXML
private Slider slider;
private DoubleProperty sliderPos = new SimpleDoubleProperty();
private DoubleProperty
sliderMin = new SimpleDoubleProperty(),
sliderMax = new SimpleDoubleProperty();
public valueSlider() {
try {
FXMLLoader l = new FXMLLoader(getClass().getResource("valueSlider.fxml"));
l.setController(this);
l.setRoot(this);
l.load();
}
catch (IOException e) {
e.printStackTrace();
}
}
#FXML
private void initialize() {
slider.minProperty().bindBidirectional(sliderMin);
slider.maxProperty().bindBidirectional(sliderMax);
slider.valueProperty().bindBidirectional(sliderPos);
value.textProperty().bindBidirectional(sliderPos, new NumberStringConverter());
}
public double getSliderPos() {
return sliderPos.get();
}
public DoubleProperty sliderPosProperty() {
return sliderPos;
}
public void setSliderPos(double sliderPos) {
this.sliderPos.set(sliderPos);
}
}
So the question now is: how do I export these two classes in a jar file and so that I can load it into the scene builder?
Quick question: I made a new FXML file in the same package and tried to use the component like so:
<AnchorPane xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8.0.121" fx:controller="main.java.controller">
<children>
<valueSlider sliderPos="75"/>
</children>
</AnchorPane>
But when I tried to open the scene builder in the IDE (intelliJ IDEA) it said:
Failed to open the file in the Scene Builder
java.lang.ClassNotFoundException: Unresolved import
javafx.fxml.LoadException:
/G:/GitHub/customParts/src/main/resources/test.fxml
But it doesn't provide any more information, but when I remove the valueSlider component it works perfectly fine.
Please let me know if you know how to solve this problem.
Thanks in advance,
Lenardjee