Range Slider

Range Slider adds a themed, accessible range control to Drupal by integrating the range-slider-element web component. It can be used in custom forms, as a field widget on numeric fields, and (when Webform is present) as a Webform element.

Form API

Use the range_slider form element. It extends Drupal core's Range element, so standard properties such as #min, #max, #step, and #default_value apply.

$form['quantity'] = [
  '#type' => 'range_slider',
  '#title' => $this->t('Quantity'),
  '#min' => 0,
  '#max' => 100,
  '#step' => 5,
  '#orientation' => 'vertical',
  '#dir' => 'rtl',
  '#output' => 'below',
  '#output__field_prefix' => '$',
  '#output__field_suffix' => 'USD',
  '#output__layout_flex' => TRUE,
];

See \Drupal\range_slider\Element\RangeSlider and
\Drupal\Core\Render\Element\Range in code for the full property list.

Field widget

For Integer, Decimal, or Float fields, choose the Range Slider widget when configuring the form display. Widget settings allow orientation, direction, and optional output placement (e.g. below or above the thumb).

Webform

With Webform enabled, add an element of type Range Slider (range_slider). Behavior matches Webform’s range element, with the range-slider-element UI and styling provided by this module.

Version compatibility

8.x-1.x / 2.x 3.x Drupal core

• 8.x-1.x: Drupal 8 and 9
• 2.x: ≥ 9.2 only

≥ 9.2 Slider library rangeslider.js (jQuery plugin) range-slider-element
(no jQuery) Drupal JS APIs

• jQuery on 8.x-1.x
• once on 2.x

once

Use 3.x for new projects on Drupal 9.2+ unless you must stay on the legacy jQuery rangeslider.js stack.

range-slider-element (3.x)

v3.0.0

Important: Please see #3516294: [META] 3.0.0 Plan for details

Read more about the range-slider-element project:

range-slider-element

rangeslider.js (8.x-1.x / 2.x)

Read more about the rangeslider.js project:

rangeslider.js

🇵🇸

Please support Palestine in a fight for their freedom and daily struggle to survive.