slider customization in libgdx

Question

I am trying to customize s slider. The default slider is like the one in first image. The knob/thumb is the same height as slider bar, and it's far left (or right) position is still in the slider bar. I would like to customize knob x position to be the knobImage.x/2. Also, is it possible to lower the y position of knob? So far I have used a very tall and transparent knob, with the knoB image at the bottom. That gives the illusion of different y value but this is hard to maintain code. So how does one customize slider in libgdx?

Answer 1

You can modify the padding of the two drawables to adjust them. Let's assume your texture regions are named blueBg and redKnob.

com.badlogic.gdx.scenes.scene2d.utils.TextureRegionDrawable {
    paddedBlueBg: { region: blueBg, leftWidth: -10, rightWidth: -10, bottomHeight: -10},
    paddedRedKnob: { region: redKnob, topHeight: -20 },
},

Negative padding will allow the knob to overhang the edges. I put -10, but you should use whatever half the width of your slider is.

For the vertical padding values, you may need to tweak the two opposing values to get what you want.

The negative padding makes the slider bigger than the space it takes up in your layout, so if you're using it in a table, you will want to pad the cell by at least the amounts of your negative padding in the style.