Looking for a slider theme tutorial

Question

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.

Answer 1

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....

Icons

• 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.

Styles

• 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)

Comments

This was very helpful. Thanks!

---

Thank you! SO much

Answer 2

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.

Answer 3

Here's a tutorial on YouTube-
https://youtu.be/0CZtXAennQ8