Seeking Approach Recommendation: n-thumb Slider / adjustable number line?

General JUCE discussion
1

Hi there, still getting back into the swing of JUCEing.

I need a horizontal slider with ‘n’ amount of thumbs on it (in my case, representing integers). It needs the following behaviors:

  • No two thumbs can have the same value.
    If changing a thumb’s value makes it equal to another thumb, it will jump past it (and any subsequent thumbs it may become equal to) in the direction of incrementing / decrementing.
  • The first thumb does not move horizontally.
    Vertical drag changes its value.
  • If changing the first thumb’s value makes it greater or equal to the second thumb, the second thumb will be set to the first thumb’s value plus one.
    This will cascade to all subsequent thumbs, increasing to ensure none are equal to each other.
  • The maximum value for any thumb on the slider is determined by the first thumb’s value times a multiplier.
    If decrementing the first thumb leads to thumbs with values greater than the new maximum, they will decrease in value, also causing a cascading effect. Logic will be needed to ensure that this does not result in more thumbs than available values.
  • Thumbs can be added to or removed from the slider. There must remain at least two thumbs on the slider, and you cannot add more thumbs than possible values between the minimum & maximum (inclusive)

Essentially, the end-goal is a slider that’s a number-line of ‘n’ unique points that can slide horizontally along it, hopping each other as needed, with the vertical-drag-adjusted leftmost point defining the minimum value (& maximum value via multiplication) and the ability to add or delete points at will while ensuring there is retained a minimum amount of points & the amount of possible unique points is not exceeded.

What approach might you take to implementing this? Some thoughts I had were to:

  • see how the ThreeValueHorizontal slider style works, and create my own Slider child class for NValueHorizontal sliders, with a special case for drag behavior for the first Thumb/Value
  • have a separate component for the first value (such as a Slider with the LinearBarVertical value), that adjusts the minimum/maximum values of an NValueHorizontal slider implementation beside it
  • with the first value represented by a LinearBarVertical, superimpose ‘n’ amount of LinearBarHorizontal style sliders, setting their drag behaviors so that only clicking on a thumb directly adjusts a slider’s value, with each slider checking other slider’s values to ensure they are never equal and adjusting / ‘hopping’ as needed.

Any insight- or perhaps an existing/similar implementation- would be much appreciated!

2

I am not sure whether Slider is still a good solution because of the difficulties in dealing with mouse events. I have implemented a slider with two thumbs because I can easily filter mouse events by left/right clicks.

Instead, I would suggest ComponentDragger since you only care about the dragging behaviour.

https://docs.juce.com/master/classComponentDragger.html

1 Like
3

Thanks.

What type of component are you thinking I’d use in conjunction with the ComponentDragger? I still need each Component’s value to perform like a horizontal slider (excluding the first value)- decrementing/incrementing as it moves on a fixed-axis left/right, with its position & value correlated, while also ensuring it hops over the values of its neighbors, and remains within the bounds of a minimum & maximum.

4

What type of component are you thinking I’d use in conjunction with the ComponentDragger

I would suggest juce::ToggleButton so that you can highlight the thumb that the user selected

decrementing/incrementing as it moves on a fixed-axis left/right, with its position & value correlated

write your own parameterAttachment is the best solution

while also ensuring it hops over the values of its neighbors

I haven’t done this before :frowning: maybe you can do this at the processor side? or do some checks while dragging?

remains within the bounds of a minimum & maximum

use juce::ComponentBoundsConstrainer with dragger

The directory below is an implement of a dragger on the FFT spectrum. You can adjust the freq & gain of the selected filter by dragging.

1 Like