Multislider"
From Documentation
(Created page with "{{ZKComponentReferencePageHeader}} = Multislider = *Demonstration: N/A *Style Guide: N/A *[http://www.zkoss.org/product/edition.dsp Available in ZK EE only] since 9.5.0 == Re...") |
|||
| Line 6: | Line 6: | ||
*[http://www.zkoss.org/product/edition.dsp Available in ZK EE only] | *[http://www.zkoss.org/product/edition.dsp Available in ZK EE only] | ||
since 9.5.0 | since 9.5.0 | ||
| − | |||
| − | |||
| − | |||
== Required Settings == | == Required Settings == | ||
| Line 16: | Line 13: | ||
! <center>Description</center> | ! <center>Description</center> | ||
|- | |- | ||
| − | | aria-label | + | | aria-label / aria-labelledby |
| − | | | + | | Name the Multislider. For more information about naming, please refer to [[ZK_Component_Reference/Accessibility | Accessibility]] |
|- | |- | ||
| data-ariaStartLabel | | data-ariaStartLabel | ||
| Line 25: | Line 22: | ||
| Describe the the slider button (end) on SliderButtons. | | Describe the the slider button (end) on SliderButtons. | ||
|- | |- | ||
| − | | data-largeStep-multiplier | + | | data-largeStep-multiplier (optional) |
| Describe the moving step of pressing PageUp/PageDown. | | Describe the moving step of pressing PageUp/PageDown. | ||
|} | |} | ||
| Line 34: | Line 31: | ||
! <center>Description</center> | ! <center>Description</center> | ||
|- | |- | ||
| − | | ArrowUp/ArrowDown | + | | ArrowUp / ArrowDown |
| Move the slider button. | | Move the slider button. | ||
|- | |- | ||
| − | | ArrowLeft/ArrowRight | + | | ArrowLeft / ArrowRight |
| Move the slider button. | | Move the slider button. | ||
|- | |- | ||
| − | | Home/End | + | | Home / End |
| Move the slider button to the minimum/maximum. | | Move the slider button to the minimum/maximum. | ||
|- | |- | ||
| − | | PageUp/PageDown | + | | PageUp / PageDown |
| Move the slider button in the large step. | | Move the slider button in the large step. | ||
|} | |} | ||
Revision as of 23:42, 28 July 2020
Multislider
- Demonstration: N/A
- Style Guide: N/A
- Available in ZK EE only
since 9.5.0
Required Settings
| aria-label / aria-labelledby | Name the Multislider. For more information about naming, please refer to Accessibility |
| 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>