Ableton Live-Style Text Slider

gui

#1

In Ableton Live, one of the common slider styles looks like this:

41%20PM

Clicking in the box and dragging vertically sets new values while the blue fill color fills left to right. Double-clicking lets you type in a value. I’m trying to make a slider like this in JUCE.

There’s already a Slider::LinearBar which is, visually, exactly the same thing, but it has a horizontal drag behavior. Similarly, Slider::LinearBarVertical is almost the same thing visually, but the fill color fills bottom to top instead of left to right and the drag direction is vertical.

I can get very close to a Live-style slider using Slider::LinearBarVertical and a custom LookAndFeel, but the drag behavior is confined to the height of the slider, which in this case is very small and makes for dialing in a value a terrible experience. It seems as well that setMouseDragSensitivity has no effect on this slider behavior. Am I missing something? Is there an easy way to increase the drag region for a slider like this?


#2

I coded this a few years ago because I wanted this exact same thing. I believe as a dirty hack I created a subclass of Slider where I overrode the mouse handler methods so the behavior was different, and changed the internal value directly.

In the end I actually created a completely new slider class of my own which separates interaction behavior from drawing entirely, and different methods of drawing, since they’re so drastically different (knob/draggable bar/linear bar) which ended up working out well.

Unfortunately IMO Slider is one of the weaker parts of the library because it has way too much stuff jammed into it - I wish it was more like Button. Slider is pretty much WYSIWYG when it comes to the interface, and if you want anything different you’ll have to hack differing behavior on by subclassing the giant monolithic class.


#3

You can try go after mouse listeners of the slider, override them and transform the mouse Axis (https://juce.com/doc/classMouseListener#a434a85e97e248920ae699a2f030bfa70)


#4

This was the quickest fix for me (although I’m leaving out the horizontal blue element altogether):

s->setSliderStyle (Slider::SliderStyle::LinearBarVertical);
s->setColour (Slider::ColourIds::trackColourId, Colours::transparentWhite);
s->setVelocityBasedMode (true);
s->setVelocityModeParameters (0.4, 1, 0.09, false);

You can calibrate the feel of the sliding via the velocity mode parameters.