Rangeslider"

From Documentation
(Created page with "{{ZKComponentReferencePageHeader}} = Rangeslider = *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
 
== Related components ==
 
SliderButtons.
 
  
 
== Required Settings ==
 
== Required Settings ==
Line 16: Line 13:
 
! <center>Description</center>
 
! <center>Description</center>
 
|-
 
|-
| aria-label
+
| aria-label / aria-labelledby
| Describe the Rangeslider.
+
| Name the Rangeslider. For more information about naming, please refer to [[ZK_Component_Reference/Accessibility | Accessibility]]
 
|-
 
|-
 
| data-ariaStartLabel
 
| data-ariaStartLabel
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:43, 28 July 2020

Rangeslider

 since 9.5.0

Required Settings

Attributes
Description
aria-label / aria-labelledby Name the Rangeslider. For more information about naming, please refer to Accessibility
data-ariaStartLabel Describe the the slider button (start).
data-ariaEndLabel Describe the the slider button (end).
data-largeStep-multiplier 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">
  <rangeslider ca:aria-label="range value" ca:data-ariaStartLabel="minimal range value"
      ca:data-ariaEndLabel="maximal range value"/>
</zk>