Numeric Edit Box with Slider

 
 
 

Standard numeric controls display a numeric edit box and optional slider along with an optional animation divot and an optional label. They are associated to an underlying parameter of any numeric type.

Tip

To provide a valid value range for your slider, use the Parameter.Min or Parameter::GetMin and Parameter.Max or Parameter::GetMax properties when you create the parameter.

You create them using the PPGLayout.AddItem or PPGLayout::AddItem method (the siControlNumber is the default for numeric parameters):

var oItem = oLayout.AddItem( "Girth", "", siControlNumber );

Here are some tips and tricks for how to set up some of the special features for file browser widget:

Note

To get a sense of the full range of configuring numbers in the layout, check out the Number Control example for the PPGLayout object.

The following item attributes are available:

Available on all Controls also as a property on the PPGItem object:

Common to many Controls:

Specific to the Standard Numeric control:

To customize the slider's appearance

There are a number of attributes that allow you to change the default slider:

  • siUINoSlider: entry box for the numeric value only (no slider)

  • siUIThumbWheel: small version of default slider

  • siUITreadmill: same size as the thumbwheel, but controls the value change by scrubbing left and right (that is, clicking inside the slider does not change the value)

// use the thumbwheel
oItem.SetAttribute( siUIThumbWheel, true );

// use the treadmill
oItem.SetAttribute( siUITreadmill, true );

// skip the slider entirely
oItem.SetAttribute( siUINoSlider, true );

To set the decimal precision for the control

The siUIDecimals attribute allows you to specify the number of decimal places to appear in the numeric edit box:

oItem.SetAttribute( siUIDecimals, 1 );

This attribute doesn't change the precision of the underlying parameter; however, when the user changes the value from the UI, the new value uses the precision set by this control. For example, if you set up a slider with a decimal precision of 0, even if the user types 2.5 into the numeric edit box, the new parameter value will still be 3.

To use logarithmic scaling for the slider

You can set the siUILogarithmic attribute to true to change the scaling stylke for the slider from linear (additive) to logarithmic (multiplicative):

oItem.SetAttribute( siUILogarithmic, true );

Creative Commons License Except where otherwise noted, this work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License