Module: deliteful/Slider

deliteful/Slider

require(["deliteful/Slider"], function (Slider) {
  new Slider();
});

The Slider widget allows selecting one value or a pair of values, from a range delimited by a minimum (min) and a maximum (max).

The selected value depends on the position of the handle and the step, which specifies the value granularity. Slider can be vertical or horizontal. The position of the minimum and maximum depends on the text direction, and can be forced using the flip property. Handles can be move using pointers (mouse, touch) or keys (up, down, home or end).

A change event is fired after the user select a new value, either by releasing a pointer, or by pressing a selection key. Before a change event, input events are fired while the user moves the Slider handle.

The Slider Widget supports ARIA attributes aria-valuemin, aria-valuemax, aria-valuenow and aria-orientation.

Most of the Slider behavior (default values, out of bound values reconciliations...) is similar to the HTML5.1 input type=range element [1], but it doesn't strictly conform to the specification, in particular for:

  • the "multiple" attribute (single/range Slider is directly determined from the content of the value property)
  • the "datalist" attribute (see https://github.com/ibm-js/deliteful/issues/252)

Like the native input type=range element, this widget can be used in a form. It relies on a hidden input text element to provide the value to the form.

[1] http://www.w3.org/TR/html5/forms.html#range-state-%28type=range%29

Source:

Extends

  • delite/FormValueWidget
  • delite/CssState
Show inherited

Members

baseClass :string

The name of the CSS class of this widget.

Type:
  • string
Default Value:
  • "d-slider"
Source:

flip :boolean

Specifies if the slider should change its default: ascending <--> descending.

Type:
  • boolean
Default Value:
  • false
Source:

max :number

Indicates the maximum boundary of the allowed range of values. Must be a valid floating-point number. Invalid max value is defaulted to 100.

Type:
  • number
Default Value:
  • 100
Source:

min :number

Indicates the minimum boundary of the allowed range of values. Must be a valid floating-point number. Invalid min value is defaulted to 0.

Type:
  • number
Default Value:
  • 0
Source:

slideRange :boolean

Applies only when the slider has two values. Allow sliding the area between the handles to change both values at the same time.

Type:
  • boolean
Default Value:
  • true
Source:

step :number

Specifies the value granularity. causes the slider handle to snap/jump to the closest possible value. Must be a positive floating-point number. Invalid step value is defaulted to 1.

Type:
  • number
Default Value:
  • 1
Source:

vertical :boolean

The slider direction:

  • false: horizontal
  • true: vertical
Type:
  • boolean
Default Value:
  • false
Source: