# Creating a Custom Slider Class

**URL:** <https://forum.juce.com/t/creating-a-custom-slider-class/25190>\
**Category:** General JUCE discussion\
**Created:** [November 19, 2017, 10:23am UTC](https://forum.juce.com/t/creating-a-custom-slider-class/25190 "2017-11-19T10:23:48Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![vincent](https://avatars.discourse-cdn.com/v4/letter/v/e9bcb4/32.png) [@vincent](https://forum.juce.com/u/vincent)\
**Post date:** [November 19, 2017, 10:23am UTC](https://forum.juce.com/t/creating-a-custom-slider-class/25190/1 "2017-11-19T10:23:48Z")

</div>

I’m trying to make a custom slider class but can’t get them to show on the plug-in.  
I started a new project to try and implement just this. The class looks like:

```
#pragma once

#include "../JuceLibraryCode/JuceHeader.h"

class CustomSlider : public Slider
{
public:
	CustomSlider();
	~CustomSlider();

	void resized() override;
	void paint(Graphics& g) override;

private:
	Slider slider;
	Label label;
};

//---------------------

#include "CustomSlider.h"

CustomSlider::CustomSlider()
{
	slider.setRange(0.0f, 1.0f);
	slider.setValue(0.0f);
	slider.setSliderStyle(Slider::SliderStyle::Rotary);

	DBG("\n\n\n\n custom made \nn\n\n\n\n\n\n");
}

CustomSlider::~CustomSlider()
{

}

void CustomSlider::resized()
{
	slider.setBounds(10,10,60,60);

	DBG("\n\n\n\n custom resize \nn\n\n\n\n\n\n");
}

void CustomSlider::paint(Graphics& g)
{
	DBG("\n\n\n\n custom paint \nn\n\n\n\n\n\n");
}

```

Then in PluginEditor:  
#pragma once

```
#include "../JuceLibraryCode/JuceHeader.h"
#include "PluginProcessor.h"
#include "CustomSlider.h"

//==============================================================================
/**
*/
class Test_sliderClassAudioProcessorEditor : public AudioProcessorEditor
{
public:
    Test_sliderClassAudioProcessorEditor (Test_sliderClassAudioProcessor&);
    ~Test_sliderClassAudioProcessorEditor();

    //==============================================================================
    void paint (Graphics&) override;
    void resized() override;

private:
    // This reference is provided as a quick way for your editor to
    // access the processor object that created it.
    Test_sliderClassAudioProcessor& processor;

	CustomSlider customSliderTest;

    JUCE_DECLARE_NON_COPYABLE_WITH_LEAK_DETECTOR (Test_sliderClassAudioProcessorEditor)
};

//--------------

#include "PluginProcessor.h"
#include "PluginEditor.h"

//==============================================================================
Test_sliderClassAudioProcessorEditor::Test_sliderClassAudioProcessorEditor (Test_sliderClassAudioProcessor& p)
    : AudioProcessorEditor (&p), processor (p)
{
    setSize (400, 300);

	addAndMakeVisible(customSliderTest);
}

Test_sliderClassAudioProcessorEditor::~Test_sliderClassAudioProcessorEditor()
{
}

//==============================================================================
void Test_sliderClassAudioProcessorEditor::paint (Graphics& g)
{
    g.fillAll (getLookAndFeel().findColour (ResizableWindow::backgroundColourId));
}

void Test_sliderClassAudioProcessorEditor::resized()
{
	customSliderTest.setBounds(getLocalBounds());
}
```

---

<div class="post-metadata">

**Author:** ![martinrobinson-2](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/martinrobinson-2/32/630_2.png) [@martinrobinson-2](https://forum.juce.com/u/martinrobinson-2)\
**Post date:** [November 19, 2017, 10:43am UTC](https://forum.juce.com/t/creating-a-custom-slider-class/25190/2 "2017-11-19T10:43:59Z")

</div>

> [@vincent](#):
>
> void CustomSlider::paint(Graphics& g)  
> {  
> DBG(“\n\n\n\n custom paint \nn\n\n\n\n\n\n”);  
> }

You’re overriding the `paint()` method so the slider drawing never happens. Either remove this, or do the following to call the `Slider::paint()` method:

```
void CustomSlider::paint(Graphics& g)
{
    DBG("\n\n\n\n custom paint \nn\n\n\n\n\n\n");
    Slider::paint (g);
}

```

---

<div class="post-metadata">

**Author:** ![vincent](https://avatars.discourse-cdn.com/v4/letter/v/e9bcb4/32.png) [@vincent](https://forum.juce.com/u/vincent)\
**Post date:** [November 19, 2017, 11:19am UTC](https://forum.juce.com/t/creating-a-custom-slider-class/25190/3 "2017-11-19T11:19:41Z")

</div>

Thanks for your reply Martin,

The slider still isn’t displayed whether I take the paint function out or call `Slider::paint()`

---

<div class="post-metadata">

**Author:** ![matkatmusic](https://avatars.discourse-cdn.com/v4/letter/m/dfb087/32.png) [@matkatmusic](https://forum.juce.com/u/matkatmusic)\
**Post date:** [November 19, 2017, 11:22am UTC](https://forum.juce.com/t/creating-a-custom-slider-class/25190/4 "2017-11-19T11:22:06Z")

</div>

don’t you have to override the LookAndFeel methods for the Slider class if you want to customize how it looks?

---

<div class="post-metadata">

**Author:** ![martinrobinson-2](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/martinrobinson-2/32/630_2.png) [@martinrobinson-2](https://forum.juce.com/u/martinrobinson-2)\
**Post date:** [November 19, 2017, 11:33am UTC](https://forum.juce.com/t/creating-a-custom-slider-class/25190/5 "2017-11-19T11:33:31Z")

</div>

Oh, right I see what you’re doing. I don’t think this mix of inheritance and composition is a good idea. But … in CustomSlider its `slider` member is never added as a child component.

---

<div class="post-metadata">

**Author:** ![yairadix](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/yairadix/32/1114_2.png) [@yairadix](https://forum.juce.com/u/yairadix)\
**Post date:** [November 19, 2017, 11:41am UTC](https://forum.juce.com/t/creating-a-custom-slider-class/25190/6 "2017-11-19T11:41:15Z")

</div>

What do you want to change is your slider? I wonder if one would want a custom slider or a custom look and feel object.

---

<div class="post-metadata">

**Author:** ![vincent](https://avatars.discourse-cdn.com/v4/letter/v/e9bcb4/32.png) [@vincent](https://forum.juce.com/u/vincent)\
**Post date:** [November 19, 2017, 12:17pm UTC](https://forum.juce.com/t/creating-a-custom-slider-class/25190/7 "2017-11-19T12:17:17Z")

</div>

> [@martinrobinson-2](#):
>
> Oh, right I see what you’re doing. I don’t think this mix of inheritance and composition is a good idea. But … in CustomSlider its slider member is never added as a child component.

Is there any way to reword this? I don’t quite understand

> [@yairadix](#):
>
> What do you want to change is your slider? I wonder if one would want a custom slider or a custom look and feel object.

is it possible to set things such as these in a look and feel class?  
set slider.setRange(0.0f, 1.0f);  
slider.setValue(0.0f);  
slider.setSliderStyle(Slider::SliderStyle::Rotary);

---

<div class="post-metadata">

**Author:** ![martinrobinson-2](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/martinrobinson-2/32/630_2.png) [@martinrobinson-2](https://forum.juce.com/u/martinrobinson-2)\
**Post date:** [November 19, 2017, 12:20pm UTC](https://forum.juce.com/t/creating-a-custom-slider-class/25190/8 "2017-11-19T12:20:10Z")

</div>

> [@vincent](#):
>
> Is there any way to reword this? I don’t quite understand

You don’t call `addAndMakeVisible()` on `slider`.

---

<div class="post-metadata">

**Author:** ![yairadix](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/yairadix/32/1114_2.png) [@yairadix](https://forum.juce.com/u/yairadix)\
**Post date:** [November 19, 2017, 1:30pm UTC](https://forum.juce.com/t/creating-a-custom-slider-class/25190/9 "2017-11-19T13:30:48Z")

</div>

> [@vincent](#):
>
> is it possible to set things such as these in a look and feel class?
> 
> set slider.setRange(0.0f, 1.0f);
> 
> slider.setValue(0.0f);
> 
> slider.setSliderStyle(Slider::SliderStyle::Rotary);

I wouldn’t create a class just for this stuff. If you set the same configs for different sliders you can make a function that you call for each.

---

<div class="post-metadata">

**Author:** ![matthieu-brucher](https://avatars.discourse-cdn.com/v4/letter/m/a5b964/32.png) [@matthieu-brucher](https://forum.juce.com/u/matthieu-brucher)\
**Post date:** [November 19, 2017, 2:15pm UTC](https://forum.juce.com/t/creating-a-custom-slider-class/25190/10 "2017-11-19T14:15:20Z")

</div>

If your goal is just changing the way the slider is drawn, still with JUCE paint primitives, then I suggest you create your own LookAndFeel class (done here: [https://github.com/mbrucher/ATKJUCEComponents/tree/c912cb45016e474b1a019c9e9bf41c5f34c762a4/JUCE](https://github.com/mbrucher/ATKJUCEComponents/tree/c912cb45016e474b1a019c9e9bf41c5f34c762a4/JUCE))  
If you want to draw bitmaps, then there is another class available in the forum that helps to do so.

The nice thing of LaF is that you keep the text displays working, otherwise you have to rewrite them as well.

---

<div class="post-metadata">

**Author:** ![noahdayan](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/noahdayan/32/4093_2.png) [@noahdayan](https://forum.juce.com/u/noahdayan)\
**Post date:** [November 20, 2017, 9:16am UTC](https://forum.juce.com/t/creating-a-custom-slider-class/25190/11 "2017-11-20T09:16:11Z")

</div>

If you just need to change the range and style of the Slider, you don’t need to create a custom class. You can set these in the AudioProcessorEditor constructor directly like this:

```
Test_sliderClassAudioProcessorEditor::Test_sliderClassAudioProcessorEditor (Test_sliderClassAudioProcessor& p)
    : AudioProcessorEditor (&p), processor (p)
{
    addAndMakeVisible (slider);
    slider.setRange (0.0f, 1.0f);
    slider.setValue (0.0f);
    slider.setSliderStyle (Slider::SliderStyle::Rotary);

    setSize (400, 300);
}

```

and declare a regular slider in the header:

```
Slider slider;

```

If you want to learn more on Sliders, I would suggest reading this tutorial: [https://juce.com/doc/tutorial\_slider\_values](https://juce.com/doc/tutorial_slider_values)

---

<div class="post-metadata">

**Author:** ![ttg](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.juce.com/ttg/32/14456_2.png) [@ttg](https://forum.juce.com/u/ttg)\
**Post date:** [November 20, 2017, 1:23pm UTC](https://forum.juce.com/t/creating-a-custom-slider-class/25190/12 "2017-11-20T13:23:23Z")

</div>

Another useful thing I’m using (hope @juce people could tell me if this is the right way) is ::getProperties() so if I need more unique object values (in addition to colors) this allows me to actually have single LookAndFeel with my own custom shapes for buttons (for example) or other unique properties for our needs.

This seems to be my next refactoring mission without doing over-inheritance.