Widget: Slider

Example

How many bedrooms are you looking for?

What's your maximum price point?

Details

Implementing This Widget

Implementing the Slider widget can be done whenever you have a need for creating a slider that is accessible so that anyone is able use it to specify desired values while interacting with your application.

Prerequisites:

You must be prepared to supply basic information to be used in the widget, such as a label, its values, orientation, etc.

To implement the Slider widget:

Call deque.createSlider with the following arguments, in order:

  • minValue: Number. The lowest value your slider can represent. Defaults to 0.
  • maxValue: Number. The highest value your slider can represent. Defaults to 100.
  • initialValue: Number. The initial value of your slider. Defaults to minValue.
  • stepSize: Number. The value by an integer multiplication of which your slider's value can change. Defaults to 1.
  • label: String. An accessible label for your slider. Defaults to 'slider'.
  • orientation: String. Your slider's orientation. Can be either 'horizontal' or 'vertical'. Defaults to 'horizontal'.
  • classes: Array of strings. Additional classes to add to your slider.
  • labelFromValue: Function. A function for computing aria-valuetext from the value of your slider. This function should accept one Number argument and returns the accessible string to be read by the screen reader.

Expected Operation and Accessibility Features

Start using it, and here's how it should work and the ways it should be accessible... [[placeholder]]

Validation and Developer Notes

In order to validate this control, you must .... [[placeholder]]

Notes for the Developer:

At your discretion, additional classes may be added to your slider, as necessary.

Example Implementation Reference

To view an implementation of this widget, see Slider widget example.