Looking for a slider theme tutorial

:information_source: Attention Topic was automatically imported from the old Question2Answer platform.
:bust_in_silhouette: Asked By Jams

Does anyone know of a tutorial for adding a custom theme to a slider control? I’d like to completely change the look, but cannot seem to figure out how.

:bust_in_silhouette: Reply From: Jams

After far too much trial and error, here are the properties I had to set to finally get this to work. I cannot say if it’s the correct way, but I was able to completely alter the look of the HSlider.

With the HSlider selected on the Scene tab after creating a new theme, modify the following properties within the Inspector tab…


  • Grabber
    — Drag and drop a pre-sized custom image to use for the slider knob here.

  • Grabber Highlight
    — Drag and drop the same pre-sized custom image to use for the slider knob here.


  • Grabber Area
    — Create a new StyleBoxFlat
    — Set desired Bg Color

  • Slider
    — Create a new StyleBoxFlat
    — Set desired Bg Color
    — Set Content Margin
    ----- Set a Top value
    ----- Set a Bottom value (Top and bottom values combined determine overall thickness of the control)

This was very helpful. Thanks!

MarkAlmighty | 2019-08-27 04:56

Thank you! SO much

Robster | 2020-02-01 01:42

:bust_in_silhouette: Reply From: Gianclgar

Here’s how I do it programatically inside the slider script, based on the other answer.
I don’t know if there’s a better way to do it.

func set_custom_style():
    var mainstyle = StyleBoxFlat.new()
    var grstyle = StyleBoxFlat.new()
    add_stylebox_override("slider", mainstyle)
    add_stylebox_override("grabber_area", grstyle)

    #Set Background Color
    mainstyle.bg_color = Color(0, 0, 0) #Black
    #Set Grabber Area Background Color
     grstyle.bg_color = Color(1, 1, 1) #White
    #Make both areas expand from the center and fill the rect_size
    grstyle.expand_margin_bottom = rect_size.y / 2
    grstyle.expand_margin_top = rect_size.y / 2
    mainstyle.expand_margin_bottom = rect_size.y / 2
    mainstyle.expand_margin_top = rect_size.y / 2

    #Fake a fancy grabber using Grabber Area's right border (optional)
    grstyle.border_color = Color(0.5, 0, 0) #Dark Red
    grstyle.border_width_right = 10

Note: This is for Horizontal Slider, In vertical i guess you only have to change rect_size.y for rect_size.x

Note2: The faked fancy grabber is currently the Grabber Area Texture border, so if you plan to add borders to the slider you won’t be able to set a different color (maybe there are workarounds like padding a bit and using the Main border… whatever, that’s another thing haha)

I’m currently struggling to get rid of the grabber entirely from script (currently setting theme to a theme I saved with all the grabbers textures set to a new image texture) and make a new one (maybe via draw_rect()?) without messing up the borders.

:bust_in_silhouette: Reply From: Shashank1q

Here’s a tutorial on YouTube-