The color picker (ColorPicker) is used to browse through and select colors. By default, it lets people navigate through colors on a color spectrum; or specify a color in either Red-Green-Blue (RGB); or alpha color code; or Hexadecimal textboxes.

For more details and examples visit the official docs. The R package can not handle each and every case, so for advanced use cases you need to work using the original docs to achieve the desired result.

ColorPicker(...)

ColorPicker.shinyInput(inputId, ..., value = defaultValue)

updateColorPicker.shinyInput(
  session = shiny::getDefaultReactiveDomain(),
  inputId,
  ...
)

Arguments

value

number
Current value of the slider.

alphaLabel

string
Label for the alpha textfield.

alphaSliderHidden

boolean
Whether to hide the alpha (or transparency) slider and text field.

alphaType

'alpha' | 'transparency' | 'none'
alpha (the default) means display a slider and text field for editing alpha values. transparency also displays a slider and text field but for editing transparency values. none hides these controls.

Alpha represents the opacity of the color, whereas transparency represents the transparentness of the color: i.e. a 30% transparent color has 70% opaqueness.

blueLabel

string
Label for the blue text field.

greenLabel

string
Label for the green text field.

hexLabel

string
Label for the hex text field.

redLabel

string
Label for the red text field.

showPreview

boolean
Whether to show color preview box.

strings

IColorPickerStrings
Labels for elements within the ColorPicker. Defaults are provided in English only.

ariaDescription

string
Detailed description for how to use the color rectangle. Moving the thumb horizontally adjusts saturation and moving it vertically adjusts value (essentially, brightness).

ariaValueFormat

string
Format string for the color rectangle's current value as read by screen readers. The string must include descriptions and two placeholders for the current values: {0} for saturation and {1} for value/brightness.

color

IColor
Current color of the rectangle.

minSize

number
Minimum width and height.

ariaLabel

string
Label of the ColorSlider for the benefit of screen reader users.

className

string
Additional CSS class(es) to apply to the ColorSlider.

componentRef

IRefObject<IColorSlider>
Gets the component ref.

isAlpha

boolean
If true, the slider represents an alpha slider and will display a gray checkered pattern in the background. Otherwise, the slider represents a hue slider.

maxValue

number
Maximum value of the slider.

minValue

number
Minimum value of the slider.

onChange

(event: React.MouseEvent | React.KeyboardEvent, newValue?: number) => void
Callback issued when the value changes.

overlayColor

string
Hex color to use when rendering an alpha or transparency slider's overlay, without the #.

overlayStyle

React.CSSProperties
Custom style for the overlay element.

styles

IStyleFunctionOrObject<IColorSliderStyleProps, IColorSliderStyles>
Call to provide customized styling that will layer on top of the variant rules.

theme

ITheme
Theme (provided through customization).

thumbColor

string
CSS-compatible string for the color of the thumb element.

type

'hue' | 'alpha' | 'transparency'
Type of slider to display.

Examples

library(shiny.fluent)

if (interactive()) {
  shinyApp(
    ui = div(
      ColorPicker.shinyInput("color", value = "#00FF01"),
      textOutput("colorValue")
    ),
    server = function(input, output) {
      output$colorValue <- renderText({
        sprintf("Value: %s", input$color)
      })
    }
  )
}