### Set Thumb Icon

To change the Thumb Icon of a slider, make use of Java API methods (requires the JavaObject library).
The image file must be located in the Files Folder (DirAssets) and added to the B4J IDE Files Manager.
Solution using external CSS File
The external CSS file, Main.css, used (located in the Project Files Folder (DirAssets) and added to the B4J IDE Files Manager).
/*
Main.css
The thumb icon image is located in the Project Files Folder.
*/
.slider1 .thumb {
-fx-background-color: transparent;
-fx-border-radius: 0;
-fx-border-color: transparent;
-fx-background-image:url("arrowdown-blue.png");
-fx-background-repeat: no-repeat;
-fx-background-position: center;
-fx-padding: 12;
}
Assign the file main.css to the form pane, like
`Private Sub Class_Globals
Private MainForm As Form
Private Slider1 As Slider
...
MainForm.Stylesheets.Add(File.GetUri(File.DirAssets, "Main.css"))
' Add the style class slider 1 to slider1.
Slider1.StyleClasses.Add("slider1")
Solution using JavaObject
Private Slider1 As Slider
' Set the icon of the slider thumb.
' The thumb background and border color are set to transparent. The icon must be located in the files folder.
' Example: SetSliderThumbIcon(Slider1, "arrowdown-green.png")
`Sub SetSliderThumbIcon(slr As Slider, img As String)
Dim joSlr As JavaObject = slr
Dim iv As ImageView
iv.Initialize("")
iv.SetImage(fx.LoadImage(File.DirAssets, img))
joSlr.RunMethodJo("lookup", Array(".thumb")).RunMethod("setStyle", Array($"-fx-background-color:transparent;-fx-border-color:transparent;"$))
joSlr.RunMethodJo("lookup", Array(".thumb")).RunMethodJo("getChildren", Null).RunMethod("clear", Null)
joSlr.RunMethodJo("lookup", Array(".thumb")).RunMethodJo("getChildren", Null).RunMethod("add", Array(iv))
End Sub`
Note:
If in addition, the external style class is used, add
' Add the external CSS file
MainForm.Stylesheets.Add(File.GetUri(File.DirAssets, "Main.css"))
' Add the styleclass "slider1" as defined in "main.css" to the slider
Slider1.StyleClasses.Add("slider1")
' Set another Thumb Icon - the file arrowdown.png is located in the Files Folder
setSliderThumbIcon(Slider1, $"arrowdown.png"$)
`

Changed: , Category: Slider, File: T6C249M1799.htm, ID: 1799