Multislider"

From Documentation
Line 6: Line 6:
 
   since 9.5.0
 
   since 9.5.0
  
== Required Settings ==
+
 
 
{{ZKComponentReferenceAccessibilityNamingReference}}
 
{{ZKComponentReferenceAccessibilityNamingReference}}
  

Revision as of 07:33, 28 September 2020

Multislider

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


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>