'Class module
' on the page that uses this component, set extra javascript and CSS files
' page.AddExtraJavaScriptFile("custom/nouislider.min.js")
' page.AddExtraJavaScriptFile("custom/wNumb.js")
' page.AddExtraCSSFile("custom/nouislider.css")
' creating a slider and adding to the cell in BuildPage()
' Dim custSlider As CustomSlidebar
' custSlider.Initialize(page, "custSlider")
' page.CellR(5,1).AddComponent(custSlider.ABMComp)
' And here we catch our event in the page
' Sub custSlider_Changed(Params As Map)
' Log("changed")
' End Sub
Sub Class_Globals
Dim ABMComp As ABMCustomComponent
Private myValue As Double
End Sub
'Initializes the object. You can add parameters to this method if needed.
Public Sub Initialize(page As ABMPage, ID As String, value As Double)
ABMComp.Initialize("ABMComp", Me, page, ID)
myValue = value
End Sub
' runs when an object is created for the first time
Sub ABMComp_Build() As String
Return $"<div id="mycustomslider" style="height:200px" >"$
End Sub
' Is useful to run some initalisation script.
Sub ABMComp_FirstRun(Page As ABMPage)
Dim script As String = $"var mycustomslider = document.getElementById('mycustomslider');
noUiSlider.create(mycustomslider, {
start: [${myValue}],
connect: false,
step: 1.0,
orientation: 'vertical',
direction: 'ltr',
range: {
'min': 0.0,
'max':100.0
},
format: wNumb({ decimals: 0 }
)});
mycustomslider.noUiSlider.on('change', function( values, handle ){
console.log("changing");
b4j_raiseEvent('${ABMComp.ID}_changed', {'value':values[handle]});
});"$
Page.ws.Eval(script, Array As Object(ABMComp.ID))
' flush not needed, it's done in the refresh method in the lib
End Sub
' runs when a refresh is called
Sub ABMComp_Refresh(Page As ABMPage)
Dim script As String = $"var mycustomslider = document.getElementById('mycustomslider');
mycustomslider.noUiSlider.set(${myValue});");"$
Page.ws.Eval(script, Null)
End Sub
' do the stuff needed when the object is removed
Sub ABMComp_CleanUp()
End Sub
Public Sub SetValue(Value As Double)
myValue = Value
End Sub