shutter

Specifies the options of the range selector's shutters.

Type: Object

Shutters are used in the dxRangeSelector widget to highlight the selected range. When using shutters, the background area for a selected range is clearly visible, and the remaining area is hidden by the shutters.

Show Example:
jQuery

In this example, the shutter's color and opacity options are changed.


                                    

                                    

color

Specifies shutter color.

Type: String
Default Value: '#ffffff'

The background color of the parent container is used for shutters by default with applied opacity. You can set a custom color for all elements, including the shutters, that use the container's background color. Use the dxRangeSelector's containerBackgroundColor configuration property to do this. To set a custom color for shutters only, use the shutter's color property directly.

This option supports the following colors.

  • Hexadecimal colors
  • RGB colors
  • RGBA colors (not supported in Internet Explorer 8)
  • Predefined/cross-browser color names
  • Predefined SVG colors (not supported in Internet Explorer 8)
Show Example:
jQuery

In this example, the shutter's color option is set to 'palegreen'.


                                    

                                    

opacity

Specifies the opacity of the color of shutters.

Type: Number
Default Value: 0.75

Show Example:
jQuery

In this example, the shutter's opacity option is set to 0.25.