Implementing roundSlider third library with jQuery plugin

Hi,

I've got an issue where I'm not quite sure if it's possible for me to use a third library that doesn't exist in the surveyCreator in surveyJS.

I want to make a roundSlider for one of my questions like the jQuery plugin round-slider. I've tried several ways to implement this function in my code but doesn't seem to find my code on the page the question is.

This is my customWidget (roundslider) js file right now;

Code
export function init(Survey) {
var widget = {
//the widget name. It should be unique and written in lowcase.
name: "barometer",
//the widget title. It is how it will appear on the toolbox of the SurveyJS Editor/Builder
title: "Barometer",
//the name of the icon on the toolbox. We will leave it empty to use the standard one
iconName: "",
//If the widgets depends on third-party library(s) then here you may check if this library(s) is loaded
widgetIsLoaded: function () {
//return typeof $ == "function" && !!$.fn.select2; //return true if jQuery and select2 widget are loaded on the page
return true; //we do not require anything so we just return true.
},
//SurveyJS library calls this function for every question to check, if it should use this widget instead of default rendering/behavior
isFit: function (question) {
//we return true if the type of question is barometer
return question.getType() === 'barometer';
},
activatedByChanged: function () {
//We are creating a new class and derived it from text question type. It means that text model (properties and fuctions) will be available to us
Survey.JsonObject.metaData.addClass("barometer", [], null, "empty");
Survey.JsonObject.metaData.addProperties("barometer", [
{
name: "step:number",
default: 1,
category: "general"
},
{
name: "rangeMin:number",
default: 0,
category: "general"
},
{
name: "rangeMax:number",
default: 100,
category: "general"
},
{
name: "radius:number",
default: 105,
category: "general"
},
{
name: "width:number",
default: 20,
category: "general"
},
{
name: "startAngle:number",
default: 0,
category: "general"
},
{
name: "endAngle:number",
default: "+360",
category: "general"
},
{
name: "circleShape",
default: "full",
category: "general"
}
]);
Survey.JsonObject.metaData.addProperty("barometer", {
name: "config",
default: null,
category: "general"
});
},
afterRender: function(question, el) {
console.log("after render");

el.style.paddingTop = "30px";
el.style.paddingBottom = "40px";
el.style.paddingLeft = "30px";
var inputEl = document.createElement("input");
inputEl.id = question.id;
inputEl.type = "text";
inputEl.setAttribute("data-barometer-id", question.name + "_" + question.id);
inputEl.setAttribute("data-barometer-min", question.rangeMin);
inputEl.setAttribute("data-barometer-max", question.rangeMax);
inputEl.setAttribute("data-barometer-step", question.step);
inputEl.setAttribute("data-barometer-value",
question.value || question.rangeMin
);
el.appenChild(inputEl);

var config = question.config || {};

if (config.id === undefined ) {
config.if = question.name + "_" + question.id;
}
if (config.min === undefined ) {
config.min = question.rangeMin;
}
if (config.max === undefined ) {
config.max = question.rangeMax;
}
if (config.step === undefined ) {
config.step = question.step;
}
if (config.value === undefined ) {
config.value = question.value || question.rangeMin;
}

var slider = new slider (inputEl, config);

slider.on("change", function () {
question.value = slider.getValue();
});
var updateValueHandler = function () {
slider.setValue(question.value || question.rangeMin);
};

question.readOnlyChangedCallback = function () {
if (question.isReadOnly) {
slider.disable();
} else {
slider.enable();
}
};

question.barometer = slider;
question.valueChangedCallback = updateValueHandler;
},
willUnmount: function (question) {
question.barometer && question.barometer.destroy();
question.barometer = null;
question.readOnlyChangedCallback = null;
},
//If you want to use the default question rendering then set this property to true. We do not need any default rendering, we will use our our htmlTemplate
isDefaultRender: false,
//You should use it if your set the isDefaultRender to false
htmlTemplate: "<div id='slider'></div>",
}

//Register our widget in singleton custom widget collection
Survey.CustomWidgetCollection.Instance.addCustomWidget(widget, "customtype");
}

Can I write jQuery directly in the customWidget or does the third library somehow need to be implemented into surveyJS?

As said, the question just doesn't show on page 4 where I want the roundSlider, this is the code in the parent component;

Code
{
"name": "page4",
"elements": [
{
"type": "barometer",
"config": {
"step": 1,
"rangeMax": 10,
"rangeMin": 0,
"radius": 105,
"width": 5,
"startAngle": 100,
"endAngle": 360,
"circleShape": "full"
}
}
]
},

Thanks!

Louise