represents a color slider currently set to the color corresponding to color.


uses the dynamically updated current value of color, with the value of color being reset if the color is modified.


represents a color slider with an initial gray color.

Details and Options

  • ColorSlider[] displays in a notebook as a color slider that can be manipulated interactively.
  • ColorSlider[Dynamic[x]] will reset the value of x when the slider is moved; ColorSlider[x] will not.
  • The following options can be given:
  • AppearanceElementsAutomaticelements to include in the color slider
    BaselinePositionAutomaticalignment relative to surrounding text
    BaseStyle{}base style specifications for the color slider
    EnabledAutomaticwhether the color slider is enabled, or grayed out
    ImageMargins0margins around the image of the displayed color slider
    ImageSizeAutomaticthe overall image size of the displayed color slider
  • A default color slider includes "Swatch" and "Spectrum" elements. Elements to use can be specified in any order in a list given as the setting for AppearanceElements.
  • Setting can be used to find the color specified by ColorSlider.
  • The settings for BaseStyle are appended to the default style typically given by the "ColorSlider" style in the current stylesheet.


open allclose all

Basic Examples  (1)

Dynamically set the variable to the selected color:

Scope  (1)

Copy and use Evaluate in Place () to display as an actual color slider:

Then use Setting to retrieve the RGB value of the color slider:

Options  (10)

AppearanceElements  (1)

Select which appearance element to include:

AutoAction  (2)

By default no colors change until you click in the slider area:

By setting AutoAction, the colors change as the mouse moves over the slider area:

BaselinePosition  (1)

Align with the surrounding text:

ContinuousAction  (2)

By default, variables are continuously updated:

Setting ContinuousAction to False makes variable updates only when the color slider is released:

Enabled  (2)

By default ColorSlider is enabled:

By setting Enabled -> False, the color slider is disabled but visible in its current state:

ImageMargins  (1)

Add margins:

ImageSize  (1)

Change the overall size:

Applications  (1)

Create a colorful drawing:

Properties & Relations  (1)

ColorSetter is a special case of ColorSlider:

Neat Examples  (1)

Wolfram Research (2007), ColorSlider, Wolfram Language function,


Wolfram Research (2007), ColorSlider, Wolfram Language function,


@misc{reference.wolfram_2020_colorslider, author="Wolfram Research", title="{ColorSlider}", year="2007", howpublished="\url{}", note=[Accessed: 19-January-2021 ]}


@online{reference.wolfram_2020_colorslider, organization={Wolfram Research}, title={ColorSlider}, year={2007}, url={}, note=[Accessed: 19-January-2021 ]}


Wolfram Language. 2007. "ColorSlider." Wolfram Language & System Documentation Center. Wolfram Research.


Wolfram Language. (2007). ColorSlider. Wolfram Language & System Documentation Center. Retrieved from