---
title: "ColorSlider"
language: "en"
type: "Symbol"
summary: "ColorSlider[color] represents a color slider currently set to the color corresponding to color. ColorSlider[Dynamic[color]] uses the dynamically updated current value of color, with the value of color being reset if the color is modified. ColorSlider[] represents a color slider with an initial gray color."
keywords: 
- choose color
- color chooser
- color control
- color dialog
- color palette
- color picker
- color picking tool
- color selection dialog
- color selector
- color setter
- color swatch
- color wheel
- XLOADCT
- XPALETTE
canonical_url: "https://reference.wolfram.com/language/ref/ColorSlider.html"
source: "Wolfram Language Documentation"
related_guides: 
  - 
    title: "Control Objects"
    link: "https://reference.wolfram.com/language/guide/ControlObjects.en.md"
  - 
    title: "Colors"
    link: "https://reference.wolfram.com/language/guide/Colors.en.md"
  - 
    title: "Dynamic Visualization"
    link: "https://reference.wolfram.com/language/guide/DynamicVisualization.en.md"
  - 
    title: "Palettes"
    link: "https://reference.wolfram.com/language/guide/Palettes.en.md"
  - 
    title: "Creating Inspectors"
    link: "https://reference.wolfram.com/language/guide/CreatingInspectors.en.md"
related_workflows: 
  - 
    title: "Build a Manipulate"
    link: "https://reference.wolfram.com/language/workflow/BuildAManipulate.en.md"
  - 
    title: "Insert a Control in an Input Expression"
    link: "https://reference.wolfram.com/language/workflow/InsertAControlInAnInputExpression.en.md"
related_functions: 
  - 
    title: "ColorSetter"
    link: "https://reference.wolfram.com/language/ref/ColorSetter.en.md"
  - 
    title: "Slider"
    link: "https://reference.wolfram.com/language/ref/Slider.en.md"
  - 
    title: "Slider2D"
    link: "https://reference.wolfram.com/language/ref/Slider2D.en.md"
  - 
    title: "Control"
    link: "https://reference.wolfram.com/language/ref/Control.en.md"
  - 
    title: "LocatorPane"
    link: "https://reference.wolfram.com/language/ref/LocatorPane.en.md"
  - 
    title: "Manipulate"
    link: "https://reference.wolfram.com/language/ref/Manipulate.en.md"
  - 
    title: "Blend"
    link: "https://reference.wolfram.com/language/ref/Blend.en.md"
related_tutorials: 
  - 
    title: "Introduction to Dynamic"
    link: "https://reference.wolfram.com/language/tutorial/IntroductionToDynamic.en.md"
  - 
    title: "Generalized Input"
    link: "https://reference.wolfram.com/language/tutorial/GeneralizedInput.en.md"
---
# ColorSlider

ColorSlider[color] represents a color slider currently set to the color corresponding to color.

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

ColorSlider[] 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:

|                     |           |                                                                                      |
| :------------------ | :-------- | :----------------------------------------------------------------------------------- |
| AppearanceElements  | Automatic | elements to include in the color slider                                              |
| AutoAction          | False     | whether to change the color automatically when the mouse moves over the color slider |
| BaselinePosition    | Automatic | alignment relative to surrounding text                                               |
| BaseStyle           | {}        | base style specifications for the color slider                                       |
| Enabled             | Automatic | whether the color slider is enabled, or grayed out                                   |
| ImageMargins        | 0         | margins around the image of the displayed color slider                               |
| ImageSize           | Automatic | the 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.

---

## Examples (15)

### Basic Examples (1)

```wl
In[1]:= ColorSlider[Pink]

Out[1]= ColorSetter[RGBColor[1, 0.5, 0.5], "SwatchSpectrum"]
```

Dynamically set the variable to the selected color:

```wl
In[2]:= {ColorSlider[Dynamic[x]], Dynamic[x]}

Out[2]= {ColorSetter[Dynamic[x], "SwatchSpectrum"], Dynamic[x]}
```

### Scope (1)

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

```wl
In[1]:= Setting[ColorSlider[]]

Out[1]= RGBColor[0.7, 0.7, 0.7]
```

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

```wl
In[2]:= Setting[ColorSetter[RGBColor[0.40320439459830626, 0., 1.], "SwatchSpectrum"]]

Out[2]= RGBColor[0.40320439459830626, 0., 1.]
```

### Options (10)

#### AppearanceElements (1)

Select which appearance element to include:

```wl
In[1]:= Table[ColorSlider[Pink, AppearanceElements -> a], {a, {"Spectrum", "Swatch", "SwatchSpectrum"}}]

Out[1]= {ColorSetter[RGBColor[1, 0.5, 0.5], "Spectrum"], ColorSetter[RGBColor[1, 0.5, 0.5], "Swatch"], ColorSetter[RGBColor[1, 0.5, 0.5], "SwatchSpectrum"]}
```

#### AutoAction (2)

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

```wl
In[1]:= {ColorSlider[Dynamic[x]], Dynamic[x]}

Out[1]= {ColorSetter[Dynamic[x], "SwatchSpectrum"], Dynamic[x]}
```

---

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

```wl
In[1]:= {ColorSlider[Dynamic[x], AutoAction -> True], Dynamic[x]}

Out[1]= {ColorSetter[Dynamic[x], "SwatchSpectrum", AutoAction -> True], Dynamic[x]}
```

#### BaselinePosition (1)

Align with the surrounding text:

```wl
In[1]:= Row[Table[ColorSlider[Pink, ImageSize -> {100, 30}, BaselinePosition -> p], {p, {Bottom, Center, Top}}], "xxx"]

Out[1]=
Row[{ColorSlider[RGBColor[1, 0.5, 0.5], ImageSize -> {100, 30}, BaselinePosition -> Bottom], 
  ColorSlider[RGBColor[1, 0.5, 0.5], ImageSize -> {100, 30}, BaselinePosition -> Center], 
  ColorSlider[RGBColor[1, 0.5, 0.5], ImageSize -> {100, 30}, BaselinePosition -> Top]}, "xxx"]
```

#### ContinuousAction (2)

By default, variables are continuously updated:

```wl
In[1]:= {ColorSlider[Dynamic[x]], Dynamic[x]}

Out[1]= {ColorSetter[Dynamic[x], "SwatchSpectrum"], Dynamic[x]}
```

---

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

```wl
In[1]:= {ColorSlider[Dynamic[y], ContinuousAction -> False], Dynamic[y]}

Out[1]= {ColorSetter[Dynamic[y], "SwatchSpectrum", ContinuousAction -> False], Dynamic[y]}
```

#### Enabled (2)

By default ``ColorSlider`` is enabled:

```wl
In[1]:= ColorSlider[Pink]

Out[1]= ColorSetter[RGBColor[1, 0.5, 0.5], "SwatchSpectrum"]
```

---

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

```wl
In[1]:= ColorSlider[Yellow, Enabled -> False]

Out[1]= ColorSetter[RGBColor[1, 1, 0], "SwatchSpectrum", Enabled -> False]
```

#### ImageMargins (1)

Add margins:

```wl
In[1]:= Table[Framed@ColorSlider[ImageMargins -> m], {m, {0, 5, 10, 20}}]

Out[1]= {ColorSetter[RGBColor[0.7, 0.7, 0.7], "SwatchSpectrum", ImageMargins -> 0], ColorSetter[RGBColor[0.7, 0.7, 0.7], "SwatchSpectrum", ImageMargins -> 5], ColorSetter[RGBColor[0.7, 0.7, 0.7], "SwatchSpectrum", ImageMargins -> 10], ColorSetter[RGBColor[0.7, 0.7, 0.7], "SwatchSpectrum", ImageMargins -> 20]}
```

#### ImageSize (1)

Change the overall size:

```wl
In[1]:= Table[ColorSlider[Pink, ImageSize -> {w, h}], {h, {10, Automatic, 50}}, {w, {50, Automatic, 250}}]//Grid

Out[1]= |                                                                                    |                                                                                           |                                                                       ... Color[1, 0.5, 0.5], "SwatchSpectrum", ImageSize -> {50, 50}]        | ColorSetter[RGBColor[1, 0.5, 0.5], "SwatchSpectrum", ImageSize -> {Automatic, 50}]        | ColorSetter[RGBColor[1, 0.5, 0.5], "SwatchSpectrum", ImageSize -> {250, 50}]        |
```

### Applications (1)

Create a colorful drawing:

```wl
In[1]:=
DynamicModule[{list = {}, pt = {-20, -20}, color}, 
Column[{ColorSlider[Dynamic[color, (color = #;AppendTo[list, #])&]], LocatorPane[Dynamic[pt, (AppendTo[list, Disk[#, 0.3]])&], Framed[Graphics[Dynamic[list], PlotRange -> 10]]]}]]

Out[1]= DynamicModule[«3»]
```

### Properties & Relations (1)

``ColorSetter`` is a special case of ``ColorSlider`` :

```wl
In[1]:= ColorSlider[Pink, AppearanceElements -> "Swatch"]

Out[1]= ColorSetter[RGBColor[1, 0.5, 0.5], "Swatch"]

In[2]:= ColorSetter[Pink]

Out[2]= ColorSetter[RGBColor[1, 0.5, 0.5], "Swatch"]
```

### Neat Examples (1)

```wl
In[1]:= Animate[ColorSlider[Pink, ImageSize -> {150 + 50Cos[t], 40 + 10Sin[t]}], {t, 2π, 0}, AnimationRate -> 1, AnimationRunning -> False]

Out[1]= DynamicModule[«7»]
```

## See Also

* [`ColorSetter`](https://reference.wolfram.com/language/ref/ColorSetter.en.md)
* [`Slider`](https://reference.wolfram.com/language/ref/Slider.en.md)
* [`Slider2D`](https://reference.wolfram.com/language/ref/Slider2D.en.md)
* [`Control`](https://reference.wolfram.com/language/ref/Control.en.md)
* [`LocatorPane`](https://reference.wolfram.com/language/ref/LocatorPane.en.md)
* [`Manipulate`](https://reference.wolfram.com/language/ref/Manipulate.en.md)
* [`Blend`](https://reference.wolfram.com/language/ref/Blend.en.md)

## Tech Notes

* [Introduction to Dynamic](https://reference.wolfram.com/language/tutorial/IntroductionToDynamic.en.md)
* [Generalized Input](https://reference.wolfram.com/language/tutorial/GeneralizedInput.en.md)

## Related Guides

* [Control Objects](https://reference.wolfram.com/language/guide/ControlObjects.en.md)
* [`Colors`](https://reference.wolfram.com/language/guide/Colors.en.md)
* [Dynamic Visualization](https://reference.wolfram.com/language/guide/DynamicVisualization.en.md)
* [`Palettes`](https://reference.wolfram.com/language/guide/Palettes.en.md)
* [Creating Inspectors](https://reference.wolfram.com/language/guide/CreatingInspectors.en.md)

## Related Workflows

* [Build a Manipulate](https://reference.wolfram.com/language/workflow/BuildAManipulate.en.md)
* [Insert a Control in an Input Expression](https://reference.wolfram.com/language/workflow/InsertAControlInAnInputExpression.en.md)

## History

* [Introduced in 2007 (6.0)](https://reference.wolfram.com/language/guide/SummaryOfNewFeaturesIn60.en.md) \| [Updated in 2021 (13.0)](https://reference.wolfram.com/language/guide/SummaryOfNewFeaturesIn130.en.md)