Set distance of sliders max value

1

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 above picture at Nr 3.

Can it be done?

2

There is Slider::setMouseDragSensitivity() to adjust how far the user needs to drag to go from min to max… however this looks more like you’re setting the thumb bounds too far when drawing. How are you calculating the thumb position?

3

You should subtract the height of the thumb from the distance it can travel.

1 Like
4

This is what I’ve come up with so far

	int x,
	int y,
	int width,
	int height,
	float sliderPos,
	float minSliderPos,
	float maxSliderPos,
	const Slider::SliderStyle style,
	Slider& slider)
{
	if(slider.isVertical())
	{
		auto sliderWidth =  (slider.getWidth() * 1.0f);
		auto sliderHeight = (slider.getHeight() * 1.0f);

		Rectangle<float> sliderOuterPath{ (sliderWidth * 0.5f) - 18.0f, 10.0f , 36.0f, maxSliderPos - 8.0f };
		g.setColour(Colour(0xff9898e6));
		g.drawRoundedRectangle(sliderOuterPath, 5.0f, 1.0f);

		Rectangle<float> sliderPath{ (sliderWidth * 0.5f) - 10.0f, sliderPos , 20.0f, (minSliderPos - sliderPos) };
		g.setColour(Colour(0x209898e6));
		g.fillRoundedRectangle(sliderPath, 5.0f);

		Rectangle<float> sliderThumb{ (sliderWidth * 0.5f) - 16.0f, sliderPos - 20.0f, 32.0f, 20.0f };
		g.setColour(Colour(0xff9898e6));
		g.drawRoundedRectangle(sliderThumb, 5.0f, 1.0f);
	}
}
5

Sounds like I have gone about this all wrong - I made the thumb out of a rectangle

6

Basically what @pizzafilms said: that sliderPos value itself isn’t accounting for thumb size, so when you subtract by 20.0f it will be too far above. You have to have the top and bottom edges of the thumb match with the expected sliderPos

You could use the minSliderPos, maxSliderPos, and sliderPos to calculate a ratio (or just Slider::proportionOfLengthToValue()) and set the thumb’s center based on that.

The position range would basically be minSliderPos - (thumbHeight / 2.0f) up to maxSliderPos + (thumbHeight / 2.0f)

2 Likes
7

Ok, If I understood correctly, I have made adjustments so that the thumb is centered around the minSliderPos and maxSliderPos.

This is great except that this means I have to extend the outer border rectangle and this then is clipped at the top because it falls beyond the slider components height. At the bottom the edge is too close to the TextBox and I can’t seem to adjust this to leave a margin between. When I reduce the TextBox height the slider length grows to fill the space again. I need to shrink the slider down within the bounds somehow.
slider2

It is really close to being right - just need a few pixels between the top and bottom

8

Just a quick update in case it helps anybody else out in the future - I managed to solve the problems I was having by overriding the Slider::SliderLayout MySliderLookAndFeel::getSliderLayout(Slider& slider) method. This enabled me to set the individual bounds for the slider and the sliders textbox - thus I could specifiy how far the travel of the slider would be and the placement of the textbox in relation to the slider.

5 Likes