Change vertical position of Hslider tick

Help UI
, ,
1

Godot Version

4.4.stable

Question

I am working on the finer details of the UI for my game. I have been struggling to get the HSlider element to look how I would like. Its current visual is below:

image
image804×104 2.66 KB

I would like for the white ticks to be vertically centered around the midline of the Hslider. I understand that I can change the shape / size / resolution of the tick via the themes, but no matter what I do the top of the tick is always at the top of the Hslider bar.

To my knowledge I have tried just about every setting in the Hslider themes, so I come to you for aid.
Thank you.

2

It’s not possible to change the vertical offset of the ticks in Godot 4.4.x

It’s possible to change the vertical position and offset in Godot 4.5 with the Slider.tick_position property and the Slider.tick_offset theme property.

As a workaround you could do the tick drawing in code. They will be drawn on top of the grabber tough. Something like:

extends HSlider


@export var custom_ticks := 0


func _draw() -> void:
	var tick_texture = get_theme_icon(&"tick")
	for i in custom_ticks:
		if not ticks_on_borders and (i == 0 or (i+1) == custom_ticks):
			continue
			
		var offset = (i * size.x / (custom_ticks - 1))
		tick_texture.draw(get_canvas_item(), Vector2(offset, (size.y - tick_texture.get_height()) / 2))

Result:

image
image460×161 515 Bytes

You can fine-tune that code with the code from 4.5 here:

3

Dang. I’ll keep this open for a little longer for the possibility of other good ideas. This is a relatively unique situation, so ill probably just make it visually similar with texture rects spaced with an HBoxContainer. When 4.5 comes out I’ll re-evaluate then.

Thank you very much for your input. I should become more familiar with the possibilities of the _draw() functions.