Multislider"
From Documentation
m (apply wikitable (via JWB)) |
|||
| (4 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
{{ZKComponentReferencePageHeader}} | {{ZKComponentReferencePageHeader}} | ||
| + | {{versionSince|9.5.0}} {{ZK EE}} | ||
| + | {{ZKComponentReferenceAccessibilityNamingReference}} | ||
| − | + | {| class="wikitable" | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | {| | ||
! <center>Attributes</center> | ! <center>Attributes</center> | ||
! <center>Description</center> | ! <center>Description</center> | ||
| − | |||
| − | |||
| − | |||
|- | |- | ||
| data-ariaStartLabel | | data-ariaStartLabel | ||
| Line 27: | Line 18: | ||
== Keyboard Support == | == Keyboard Support == | ||
| − | {| | + | {| class="wikitable" |
! <center>Key</center> | ! <center>Key</center> | ||
! <center>Description</center> | ! <center>Description</center> | ||
Latest revision as of 06:16, 26 July 2023
Since 9.5.0
- Available for ZK:
-
Label a Component
To name a component with ARIA attribute by adding the aria-label client attribute to the component, please refer to ZK_Developer's_Reference/Accessibility#Specify_ARIA_Attributes
| data-ariaStartLabel | Describe the the slider button (start) on SliderButtons. |
| data-ariaEndLabel | Describe the the slider button (end) on SliderButtons. |
| data-largeStep-multiplier (optional) | Describe the moving step of pressing PageUp/PageDown. |
Keyboard Support
| ArrowUp / ArrowDown | Move the slider button. |
| ArrowLeft / ArrowRight | Move the slider button. |
| Home / End | Move the slider button to the minimum/maximum. |
| PageUp / PageDown | Move the slider button in the large step. |
Example
<zk xmlns:ca="client/attribute">
<multislider ca:aria-label="range value">
<sliderbuttons startValue="0" endValue="100" ca:data-ariaStartLabel="minimal range value"
ca:data-ariaEndLabel="maximal range value"/>
<sliderbuttons startValue="10" endValue="50" ca:data-ariaStartLabel="minimal range value"
ca:data-ariaEndLabel="maximal range value"/>
</multislider>
</zk>