MultiSlider

Configuration

Defaults

The MultiSlider control allows you to specify initial values for any control present in the UI. The base configuration defaults can be found in the multi-slider module within config.js. If your using preconfigured MultiSlider like margin or box shadow. You can find the config file within the corresponding module. Defaults can be found under the controlOptions.defaults structure.

Example

// Overriding Box Shadow -- this will override all device defaults.
defaults: [
 {
     media: [ 'base', 'phone', 'tablet', 'desktop', 'large' ],
     unit: 'px',
     isLinked: false,
     type: 'inset',
     color: '#cecece',
     values: {
       'horizontal-position': 0,
       'vertical-position': 0,
       'blur-radius': 10,
       'spread-radius': 0
     }
   }
]

Passing Multiple Defaults

The defaults configuration option is an array so that you can pass in multiple defaults. If you need to set defaults for phone as configuration A and desktop as configuration B, you will want to pass in 2 objects in the defaults array.

Parameters

Media

Since the Multislider control allows you to choose settings for multiple controls, the media key allows you to define the devices you would like to set the defaults on. You can pass [ 'base' ] if you want to set the defaults for all devices, without breaking the relationship between them. This is the equivalent of CSS without a media query. For each device that you specify, the defaults will be set when the user customizes it.

unit

Units controls the CSS units to be used for adding the CSS. The possible values are %, px, em. Not all controls support pixels, percentages and ems.

isLinked

Whether or not all sliders are tied together. This only affects the user experience, it has no impact on how the css will be output.

values

This array of integers indicate the settings of the sliders. The keys match the name of a corresponding slider control.