SmoothSlider

part of wslib


a Pen-based replacement for SCSlider, with extra styling options.


SmoothSlider works the same way as SCSlider. 

But, as the name states, it is smooth. I created this because, frankly, I don't like the looks of SCSlider.

SmoothSlider is inspired and partly based upon blackrains Knob (available as Quark).


Rect( 0,0,40,160).centerIn(Rect( 0,0,220,220))


(

w = SCWindow( "SmoothSlider", Rect( 300,150,220,220) ).front;  

b = SmoothSlider( w,  Rect( 90,30,40,160) ).value_(0.75)

.action_({ |sl| sl.value.postln; });

)


SmoothSlider listens to all messages as SCSlider does, but has a few extra of its own:


mode

Mode indicates the way a SmoothSlider reacts to the mouse. The mode can be 'jump' or 'move'

'jump' :  (default) behaves as SCSlider; the value jumps to where the mouse hits

'move' :  the value only changes by the amount the mouse is moved after clicking, and doesn't

jump to the mouse position.


b.mode_( \move ); // try moving the slider before and after running this line


b.mode_( \jump ); // back to default


knobColor / knobColor_

background / background_

hilightColor / hilightColor_

Colors and Gradients can be varied using these getter/setters:


(

w = SCWindow( "colorful", Rect(200,200, 250, 120 ) ).front.decorate;

7.do({ |i| SmoothSlider( w, 30@100 )

.knobColor_( Color.rand(0,0.8).alpha_( [1,0.5,1,1,0,1,0][i] ) )

.background_( Color.rand(0,0.8).alpha_( [1,0.5,0,1,1,0,0][i] ) )

.hilightColor_( Color.rand(0,0.8).alpha_( [1,0.5,1,0,1,0,1][i] ) )

.value_( i.linlin( 0,6,0.2,0.8) )

.canFocus_( false ); // looks better without the focus rectangle

});

)


(

x = { Color.rand(0,0.8).alpha_( [1.0.rand ** 2, 1].choose ) };

w = SCWindow( "gradients", Rect(200,200, 250, 120 ) ).front.decorate;

7.do({ |i| SmoothSlider( w, 30@100 )

.knobColor_( Gradient( x.(), x.(), [\h, \v].choose ) )

.background_( Gradient( x.(), x.(), [\h, \v].choose ) )

.hilightColor_( Gradient( x.(), x.(), [\h, \v].choose ) )

.value_( i.linlin( 0,6,0.2,0.8) )

.canFocus_( false ); // looks better without the focus rectangle

});

)


(

w = SCWindow( "smoother smoothslider", Rect(200,200, 250, 120 ) ).front.decorate;

z = SmoothSlider( w, 160@15 ).value_( 0.5 )

.knobColor_(  Gradient( Color.gray(0.9), Color.gray(0.1), \h ) )

.background_( Gradient( Color.black.alpha_(0.8), Color.white.alpha_(0.8), \h ) )

.hiliteColor_( Gradient( Color.blue.alpha_(0.5), Color.web.purple.alpha_(0.25), \v ) )

.knobSize_(1).canFocus_(false);

)


knobSize / knobSize_

knobSize is relative to the width of the slider. It defaults to 0.25. 

The rounded edges of SmoothSlider are influenced by the knobSize.


(

w = SCWindow( "knobSize", Rect(100,100, 120, 250 ) ).front.decorate;

c = SmoothSlider( w, 50@200 ).value_(1).knobSize_( 1 ).canFocus_( false );

d = SmoothSlider( w, 50@200 ).value_(1).knobSize_( 1 ).canFocus_( false );

c.action_({ |sl| d.knobSize = sl.value; }); // moving the slider changes the knobSize of the other

d.action_({ |sl| c.knobSize = sl.value; });

)


baseWidth / baseWidth_

baseWidth is relative to the width of the sliders base. It defaults to 1. 


(

w = SCWindow( "basewidths", Rect(200,200, 250, 120 ) ).front.decorate;

7.do({ |i| SmoothSlider( w, 30@100 ).baseWidth_( 1/(i+1) ).value_( i/7 ); });

)


(

w = SCWindow( "cocoa-like slider", Rect(200,200, 200, 120 ) ).front.decorate;

z = SmoothSlider( w, 160@15 ).baseWidth_( 0.3 ).value_( 0.5 )

.knobColor_(  Gradient( Color.gray(0.8), Color.gray(0.2), \h ) )

.background_( Gradient( Color.black.alpha_(0.8), Color.white.alpha_(0.8), \h ) )

.knobSize_(1).hilightColor_(nil).canFocus_(false);

)


border / border_

borderColor / borderColor_

border is the size of the outline border around the slider. It defaults to 0 (no border).

borderColor defines the color of the border


(

w = SCWindow( "borders", Rect(200,200, 250, 120 ) ).front.decorate;

7.do({ |i| SmoothSlider( w, 30@100 ).border_( i )

.borderColor_( Color.rand )

.value_( i/7 ); });

)


(

w = SCWindow( "levelmeters", Rect(200,200, 250, 120 ) ).front.decorate;

7.do({ |i|

SmoothSlider( w, 30@100 ).border_( 1 ).borderColor_( Color.gray(0.2) )

.value_( (i+1)/7 ).knobSize_(0).canFocus_(false)

.background_( Color.white.alpha_(0.25) )

.hiliteColor_( Gradient( Color.red.alpha_(0.9), Color.green.alpha_(0.8), \v ) );

});

)


relThumbSize / relThumbSize_

the relThumbSize is a little different from the knobSize. It changes the thumbSize variable (inherited from SCSlider) but relative to the slider's length. The default thumbSize is 0. You will only see a change if the thumbSize becomes greater then the absolute knob size (absKnobSize - getter only).


(

w = SCWindow( "relThumbSize", Rect(100,100, 220, 120 ) ).front.decorate;

c = SmoothSlider( w, 200@50 ).canFocus_( false );

d = SmoothSlider( w, 200@50 ).canFocus_( false );

c.action_({ |sl| d.relThumbSize = sl.value; });

d.action_({ |sl| c.relThumbSize = sl.value; });

)



safeValue_

same as .value, but prevents first checks wether the window is not closed to prevent a crash.