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...")
 
m (apply wikitable (via JWB))
 
(7 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
{{ZKComponentReferencePageHeader}}
 
{{ZKComponentReferencePageHeader}}
 +
{{versionSince|9.5.0}} {{ZK EE}}
 +
{{ZKComponentReferenceAccessibilityNamingReference}}
  
= Multislider =
+
{| class="wikitable"
*Demonstration: N/A
 
*Style Guide: N/A
 
*[http://www.zkoss.org/product/edition.dsp Available in ZK EE only]
 
  since 9.5.0
 
 
 
== Related components ==
 
SliderButtons.
 
 
 
== Required Settings ==
 
 
 
{| border="1px"
 
 
! <center>Attributes</center>
 
! <center>Attributes</center>
 
! <center>Description</center>
 
! <center>Description</center>
|-
 
| aria-label
 
| Describe the Multislider.
 
 
|-
 
|-
 
| data-ariaStartLabel
 
| data-ariaStartLabel
Line 25: Line 13:
 
| 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.
 
|}
 
|}
  
 
== Keyboard Support ==
 
== Keyboard Support ==
{| border="1px"
+
{| class="wikitable"
 
! <center>Key</center>
 
! <center>Key</center>
 
! <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.
 
|}
 
|}

Latest revision as of 06:16, 26 July 2023

Since 9.5.0

  • Available for ZK:
  • http://www.zkoss.org/product/zkhttp://www.zkoss.org/whyzk/zkeeVersion ee.png

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

Attributes
Description
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

Key
Description
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>