+1 vote

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.

in Engine by (69 points)

3 Answers

+3 votes

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)

by (69 points)

This was very helpful. Thanks!

Thank you! SO much

0 votes

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.

by (58 points)
0 votes

Here's a tutorial on YouTube-

by (58 points)
Welcome to Godot Engine Q&A, where you can ask questions and receive answers from other members of the community.

Please make sure to read Frequently asked questions and How to use this Q&A? before posting your first questions.
Social login is currently unavailable. If you've previously logged in with a Facebook or GitHub account, use the I forgot my password link in the login box to set a password for your account. If you still can't access your account, send an email to webmaster@godotengine.org with your username.