controlP5 slider.FLEXIBLE with more than 11 tick marks no longer aligns the pointer with the marks

Question

I have the following code for my slider(s):

import controlP5.*; //import ControlP5 library
ControlP5 gui;

void setup() {
  size(600,100);
  gui = new ControlP5(this);
  
  gui.addSlider("Water_Level")
    .setPosition(20, 40)
    .setSize(500, 20)
    .setRange(0, 100)
    .setValue(70)
    .setNumberOfTickMarks(21)
    .setSliderMode(Slider.FLEXIBLE);
}

void draw() {
  background(color(64,64,64));
}

If I setNumberOfTickMarks to '11' then the pointer lines up fine with the tick marks. But I need a resolution of 5, so I need '21' ticks. But the alignment is off.

How do I fix it?

Answer 1

Try changing .setSize(500,20) to .setSize(490,20). That should cause pointer to line up correctly with tick marks.