Skip to content
This repository has been archived by the owner on Oct 30, 2022. It is now read-only.

Latest commit

 

History

History
135 lines (89 loc) · 5.68 KB

slider.md

File metadata and controls

135 lines (89 loc) · 5.68 KB

Slider

Select a value from a continuous or discrete range of values by moving the slider thumb. Optimized for mobile.

Main features

  • Touch support
  • Continuous or discrete slider by setting the step size (adjustable to any value including 0)
  • Optional tick marks
  • Optional pin label
  • Custom thumb element (for instance SVG)
  • Optionally disable clicking on track
  • Keyboard control

Usage

Keyboard control

Press TAB to navigate to the slider thumb - it will show a highlight. Press ENTER to execute the equivalent of a click.

  1. Start keyboard control by tabbing to the slider thumb. It will show a focus state.
  2. Keyboard interaction follows the WAI-ARIA slider authoring practices.
Keys Result
Right Arrow Increase the value of the slider by one step.
Up Arrow Increase the value of the slider by one step.
Left Arrow Decrease the value of the slider by one step.
Down Arrow Decrease the value of the slider by one step.
Home Set the slider to the first allowed value in its range.
End Set the slider to the last allowed value in its range.
Page Up Increment the slider by 10 steps.
Page Down Decrement the slider by 10 steps.
Shift, and Right Arrow or Up Arrow Increment the slider by 10 steps.
Shift, and Left Arrow or Down Arrow Decrement the slider by 10 steps.

The amount of change depends on the step size. This can be set with option step (default: 1). Also the values for first allowed value (min) and last allowed value (max) can be set.

Options

Slider specific options

Parameter Required Type Default Description
defaultValue optional Number 0 Initial slider value
disabled optional Boolean false Set to true to make the slider read only
icon optional String, hyperscript or component Adds a String, hyperscript or component to the slider control
interactiveTrack optional Boolean true Set to false to prevent clicking on the track
max optional Number 100 Maximum slider value
min optional Number 0 Minimum slider value
onChange optional Function ({ value: number }) => undefined Callback function that receives the slider state
pin optional Boolean false Use with step; on click shows a pin shape with the current value
stepSize optional Number 1 Step size; set to 0 for a continuous (smooth) slider
ticks optional Boolean false Show a tick for each step; limited to 100
value optional Number 0 Managed Slider value (see: Handling state)

Common component options

Parameter Required Type Default Description
after optional String, hyperscript or component Extra content after main content; note that this content is placed right of preceding elements with a higher stacking depth
before optional String, hyperscript or component Extra content before main content; note that this content is placed left of subsequent elements with a lower stacking depth
className optional String Extra CSS class appended to pe-slider
element optional String "div" HTML element tag
events optional Object Options object containing one or more standard events such as onclick (React: onClick)
id optional String HTML element id
tabindex (React: tabIndex) optional Integer 0 Tab index
tone optional String: "dark" or "light" Renders the component light on dark (sets class pe-dark-tone); use "light" to locally inverse (sets class pe-light-tone)

Composition

Slider is optionally composed from:

  • Icon (with option icon)

CSS classes

Design considerations

  • With both usability and theming in mind, no range input element is created (other than for instance Material Design Lite). The range input has limited styling options, for instance it is not possible to create a large enough click area for the slider thumb (without making the thumb itself enormous). Using a different image for the thumb is out of the question. This Slider component is composed from DIV elements instead.
  • Vertical orientation is not supported because it is not part of the design specification. The same goes for multi-thumb support.

Future

  • Right to left support
  • Full ARIA specs