SaturationSlider
SaturationSlider is a component used to allow the user to select a color saturation.
The SaturationSlider follows the WAI-ARIA - Slider Pattern for accessibility.
Keyboard Navigation
| Key | Description | State |
|---|---|---|
ArrowRight | Increases the value by one. | - |
ArrowLeft | Decreases the value by one. | - |
ArrowUp | Increases the value by one. | - |
ArrowDown | Decreases the value by one. | - |
ARIA Roles and Attributes
| Component | Role and Attributes | Usage |
|---|---|---|
SaturationSliderThumb | role="slider" | Indicates that this is a slider. |
aria-label | Sets "Saturation and brightness thumb". | |
aria-valuemin | Sets the 0 value. | |
aria-valuemax | Sets the 100 value. | |
aria-valuenow | Sets the current value. | |
aria-valuetext | Sets the current value, such as "Saturation 18%, Brightness 18%". | |
aria-readonly | Set to "true" if isReadOnly is set. | |
aria-disabled | Set to "true" if isDisabled is set. | |
aria-invalid | Set to "true" if isInvalid is set. | |
aria-required | Set to "true" if isRequired is set. | |
input Internal | type="hidden" | Excludes the element from the accessibility tree. |
aria-readonly | Set to "true" if isReadOnly is set. | |
aria-disabled | Set to "true" if isDisabled is set. | |
aria-invalid | Set to "true" if isInvalid is set. | |
aria-required | Set to "true" if isRequired is set. |
Edit this page on GitHub