Range slider for modern interfaces.

Core options

• min, max, from, to — define the range and initial values.
• step — controls the increment size for keyboard and pointer movement.
• type — use single or double.
• skin — switch themes: flat, round, big, sharp, square, modern.

Behavior controls

• hide_min_max and hide_from_to — hide or show labels.
• grid, grid_num, grid_snap — enable ruler-like ticks.
• keyboard — turn on or off arrow-key navigation.
• disable and block — lock the slider state.

Examples

createRangeSlider(host, {
  type: 'double',
  min: 0,
  max: 100,
  from: 20,
  to: 80,
  step: 5,
  skin: 'round',
  grid: true
});

createRangeSlider(host, {
  type: 'single',
  min: 10,
  max: 100,
  from: 42,
  step: 1,
  skin: 'sharp',
  hide_min_max: false,
  hide_from_to: false
});