Slider Customization via LookAndFeel_V4

[DKDiveDude]

Trying to create a synthesizer with lots of knobs. Two questions;

1. Using myKnob.setSliderStyle (Slider::Rotary) it seems to have a lot of invisible margin around the actual visible knob, meaning if I drag my mouse pointer quite a distance out from the knob, it still reacts. Is there anyway to decrease that margin?

2. Is there any where I can find further detailed information on LookAndFeel public member functions, that explains what they do? For example " drawLinearSliderThumb()" what is its function?

[Chi79]

The linear slider thumb is the knobby/cap part of the slider that your finger would grab if it was a real slider.

Set distance of sliders max value

I’m making a custom vertical slider by overriding the drawLinearSlider method in LookAndFeel_V4. I need to find a way to set the distance that the slider must travel to reach the maximum value. [slider] As shown above the rectangle i’m using for the thumb starts in the right place but to reach the max value (127) it must move beyond the outer rectangle. I would like to find some way to constrain the distance between min and max values such that the max value was at the position shown in the …

I think you can customize the functional area of the slider by using the Slider::SliderLayout of LookAndFeel

[DKDiveDude]

Thanks that may be, but I am not sure how to implement it.

Via the “Customise the look and feel of your app” tutorial, I figured out how to do the following only to override thumb color.

class MyLookAndFeel : public LookAndFeel_V4
{
public:
	MyLookAndFeel()
	{
		setColour(Slider::thumbColourId, Colours::red);		
	}
};

And I was now wondering how to override also SliderLayout, if it indeed is that which determines margin around the thumb where movement of mouse pointer changes slider position.

[Chi79]

Slider::SliderLayout MySliderLookAndFeel::getSliderLayout(Slider& slider)
{
	Slider::SliderLayout layout;

	if (slider.isVertical() || slider.isRotary())
	{
		auto window = slider.getLocalBounds().reduced(slider.getHeight() * 0.5f);

		layout.sliderBounds = window.removeFromTop(window.getHeight() * 0.5f).reduced(window.getHeight() * 0.2);

		return layout;
	}

	return layout;
}

This is just an example of how you can use this inside method your own LookAndFeel - i’m not 100% sure it is what you need but it’s worth a shot. Obviously you need to adjust it so that the layout you return is the size and position that you would want.