Slider Label that displays value when changed

General JUCE discussion
1

I am making a rotary slider that has a text label that displays the name of the slider, but I want that text to change to the value of the slider when it’s being modified. Kind of like the popup menu, but replacing name name label instead.

What’s the best/correct way to do this? The only solutions I have thought of are quite convoluted.

Thanks!

2

override mouseDrag and mouseUp of Slider in an inherited slider class. there each of these methods first calls the base class’ method so it doesn’t break existing functionality. then in mouse drag you additionally call setText of your label to give it the parameter value. in mouseUp you change it back to the parameter’s name

1 Like
3

I think that would be the simplest

    slider.onValueChange = [this] { 
        label.setText(juce::String( slider.getValue() ), juce::NotificationType::dontSendNotification);
    };
4

The solution will depend on some further details. Including: do you want the Label to display the value only while a mouse is modifying the value (mouseDown / drag)? Or do you also want the value displayed while host automation or other “remote” control is changing the parameter value?

5

Only when mouse is dragging

6

I would use 2 labels, and keep the value label always updating and forget about all mess with the mouse, only swap showing / hiding the value and name when starting and ending the drag. In addition, in this way you can configure the properties of the text of each label in the appropriate way, or use a timer so that the swap occurs after a few seconds, since the user may want to review or readjust what he has established without it disappearing quickly when releasing the mouse

7

Consider the subtle difference in user experience between showing the value while dragging, vs showing the value while the mouse is down. Either way is possible, and I went with the latter option when I implemented a similar rotary Slider (aka knob) Component.

So depending on the desired effect, you’d use some combination of mouse-related callbacks and possibly a Timer to set a private bool in your subclass, named something like showTheValue. Then use that bool to conditionally set the Label’s text, probably within the paint method.

8

Finally I am going to implement something similar since I have space problems, and I think the simplest and practical thing is to keep the textBox of the slider, and add the label of the name with background color hiding the textbox.

just override onDragStart and onDragEnd to make the label invisible / visible. The good thing about this is that the label is hidden as soon as we click on the control, and disappears when releasing (not only when dragging, which would be impractical)

Since now it all comes down to using the setVisible function at any time and place, you can implement any type of mechanics, from a timer, to showing all values, or in groups. For example you might want to see the value of another control while modifying another.

1 Like
9

This is what I ended up doing!

attack.onDragStart = [this]
    {
        attack.onValueChange = [this] { attackLabel.setText( String (attack.getValue()), dontSendNotification); };
    };
    
attack.onDragEnd = [this]
    {
        attackLabel.setText("a", dontSendNotification);
        attack.onValueChange = [this]{};
    };
10

that’s a smooth solution. i would only improve it by actually using the rangedAudioParameter’s method for getting the textual representation of the value instead of manually parsing the value to text, because then it works with all parameter types. say you have a waveform chooser, it would then not show 0,1,2… but sine,saw,square…

11

What about if the user uses the mouse wheel instead of dragging the knob/slider? And if it’s a label when not being dragged, then how do you enter values if you want to do that instead of dragging the mouse. Personally, I’d have the name and value fields separately displayed. Unless you have a real lack of available space, it seems like a lot of hoops to jump through for no real gain to the user.

12

adding MouseListener in the custom slider it is possible to detect onEnter and onExit which seems more reasonable, since just by placing the mouse it is possible to see the value and modify it as you mentioned.
But I’m not sure if this is recommended. I think it should be able to be assigned as lambda.