Click here to Skip to main content
11,413,676 members (73,463 online)
Click here to Skip to main content

Audio Mixing Console Fader/Slider Control

, 25 May 2004
Rate this:
Please Sign up or sign in to vote.
A control to replicate behaviour and appearance of an audio mixing console fader/slider.

Sample Image - avfader.png

Introduction

Recently, I came up with an idea for a program that required the ability to mimic certain aspects of a audio or lighting console. While I could find controls that could do a decent job for knobs, dials and meters, I couldn't find a decent slider control that looked anything remotely like a fader control found on these consoles.

So, I did what any self respecting self taught programmer would do while learning a new language. I decided to break my teeth on learning how to create my own custom controls in C#. Hence, the birth of the AVFader control. This is my first attempt at creating a custom control. I must say that the experience wasn't anywhere near as bad as I thought it might be, in fact, it was actually quite fun to create.

Implementation

My first attempt at this control was to try and extend the TrackBar control and just override the OnPaint and WndProc methods. After discussing various pitfalls in such an implementation with a good friend of mine Fadrian, he basically told me it would be easier to just create one from scratch. Thankfully, after a quick look through the MSDN documentation, it turned out he was correct. The TrackBar control has an unbelievable amount of Windows messages going in and out of it.

Even though I have created this control from scratch, I have tried where possible to make the properties as close to the TrackBar settings because that control, while ugly, is very easy to use. In theory, you should be able to drop this control in over the top of an existing TrackBar control without any hassles.

Design Constraints

You will recall that I was trying to replicate a fader as found on an audio mixing console, while also keeping it close to the TrackBar control. Well, as with any project, I have sacrificed some features, some due to simplicity and some due to realism constraints.

  • Orientation is always vertical (realism).
  • Tick scale is linear not exponential (simplicity).
  • Clicking on the slider track will not move the slider (realism).
  • Slider movement is smooth and doesn't snap to the ticks (realism).

Please take these constraints into account when playing with this control.

Code

This is used to move the slider image when dragging the slider along the track:

private void MoveSlider(int delta)
{
    // Move the slider and make sure it stays in the bounds of the control
    if (delta < 0 && (this.picSlider.Top + delta) <= 0)
        this.picSlider.Top = 0;
    else if (delta > 0 && (this.picSlider.Top 
      + this.picSlider.Height + delta) >= this.Height)
        this.picSlider.Top = this.Height - this.picSlider.Height;
    else
        this.picSlider.Top += delta;
    this.CalculateSliderValue();
}

This is used to move the slider based on the value of the Value property:

private void MoveSlider()
{
    // distance between tics used in ratio calc
    int distance = Math.Abs(this._maxValue) + Math.Abs(this._minValue);
    // percentage of control travelled
    float percent = (float)this._value / (float)distance;
    // New slider location
    this.picSlider.Top = this.Height - this.Top - 
      Convert.ToInt32(percent * (float)(this.Height - this.picSlider.Height));
}

And lastly, this one is pretty self explanatory, it calculates the value of the Value property based on the location of the slider image on the control:

private void CalculateSliderValue()
{
    // distance between tics used in ratio calc
    int distance = this.Height - this.picSlider.Height;
    // percentage of control travelled
    float percent = (float)this.picSlider.Top / (float)distance;
    // Slider movement in points
    int movement = Convert.ToInt32(percent * (float)(Math.Abs(this._maxValue) 
                   + Math.Abs(this._minValue)));
    // New value
    this._value = 
        (this._maxValue >= 0) ? this._maxValue - 
        movement : this._maxValue + movement;
    // Raise the ValueChanged event
    ValueChanged(this, new EventArgs());
}

Conclusion

Overall, I'm quite happy with this as a first attempt at control development. It does what I need it to do, and also without exploding in my face. Hopefully, someone else can find this useful as well.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

Mr Smiley
Web Developer
Australia Australia
Tim is one of the two co-founding Directors of web design and development company Reality Edge Media. He maintains an active interest in understanding new technologies while trying to solve the worlds big problems. Tim's current favourite technologies include C#, PHP and MySQL. He specialises in web security, systems architecture and design and database development.

Comments and Discussions

 
QuestionUsing this control in VB Pin
MadeByVince, 22-Jan-15 20:23
memberMadeByVince22-Jan-15 20:23 
QuestionReverse Slider (Max to Min on slide up) Pin
Mike Lucas, 30-Apr-14 11:22
memberMike Lucas30-Apr-14 11:22 
QuestionProblems with values from -99 to +9 Pin
daniel_costa, 24-May-13 5:11
memberdaniel_costa24-May-13 5:11 
SuggestionFixed vertical positioning of fader when control is re-sized [modified] Pin
Member 7881772, 23-Feb-13 9:31
memberMember 788177223-Feb-13 9:31 
QuestionLicense for code -- CPOL? Pin
David E Hollingsworth, 27-Jul-12 7:41
memberDavid E Hollingsworth27-Jul-12 7:41 
GeneralCool work + little changes Pin
midibase, 23-Aug-10 9:29
membermidibase23-Aug-10 9:29 
GeneralVery Nice :) Pin
kev_bite, 23-Nov-08 6:11
memberkev_bite23-Nov-08 6:11 
GeneralCool work + some fixes Pin
Helmut Obertanner, 25-Sep-07 11:13
memberHelmut Obertanner25-Sep-07 11:13 
GeneralReally good work Pin
jonathan15, 14-Jul-07 8:44
memberjonathan1514-Jul-07 8:44 
QuestionPorting to Pocket PC? Pin
stanelie, 20-Apr-07 4:22
memberstanelie20-Apr-07 4:22 
GeneralNot getting it work quite right.. Pin
AtlasApollo, 30-Oct-06 11:22
memberAtlasApollo30-Oct-06 11:22 
GeneralRe: Not getting it work quite right.. Pin
Mr Smiley, 30-Oct-06 11:43
memberMr Smiley30-Oct-06 11:43 
GeneralRe: Not getting it work quite right.. Pin
AtlasApollo, 30-Oct-06 11:55
memberAtlasApollo30-Oct-06 11:55 
GeneralThe slider disappears in my form :-( Pin
Dermot O S, 31-Mar-06 6:52
memberDermot O S31-Mar-06 6:52 
GeneralRe: The slider disappears in my form :-( Pin
Dermot O S, 31-Mar-06 7:15
memberDermot O S31-Mar-06 7:15 
GeneralError while executing AVFaderTest Pin
kmamathak@rediffmail.com, 28-Apr-05 0:37
memberkmamathak@rediffmail.com28-Apr-05 0:37 
QuestionHow do I use this?? Pin
shof, 28-Mar-05 14:13
sussshof28-Mar-05 14:13 
AnswerRe: How do I use this?? Pin
shof, 28-Mar-05 20:27
membershof28-Mar-05 20:27 
GeneralThe Audio Stuff Pin
DAQ, 4-Jun-04 22:37
memberDAQ4-Jun-04 22:37 
GeneralRe: The Audio Stuff Pin
Mr Smiley, 6-Jun-04 13:56
memberMr Smiley6-Jun-04 13:56 
GeneralNot quite it... Pin
Carl Mercier, 27-May-04 4:29
memberCarl Mercier27-May-04 4:29 
GeneralRe: Not quite it... Pin
MrSmiley18, 27-May-04 13:44
memberMrSmiley1827-May-04 13:44 
GeneralRe: Not quite it... Pin
Carl Mercier, 27-May-04 14:01
memberCarl Mercier27-May-04 14:01 
GeneralRe: Not quite it... Pin
MrSmiley18, 27-May-04 14:06
memberMrSmiley1827-May-04 14:06 
Generalcontrols witout limits ... Pin
_elli_, 26-May-04 21:51
member_elli_26-May-04 21:51 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.150427.2 | Last Updated 26 May 2004
Article Copyright 2004 by Mr Smiley
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid