range_slider

Provides https://rangeslider.js.org/ integration with a Field Widget, Form API and Webform.

Form API example

$form['example'] = [
  '#type' => 'range_slider',
  '#title' => 'Rangeslider',
  '#min' => 5,
  '#max' => 30,
  '#step' => 2,
  '#default_value' => 12,
  '#description' => 'Example range slider',
  '#data-orientation' => 'horizontal', // v2
  '#orientation' => 'horizontal', // v3
  '#dir' => 'rtl', // v3
  '#output' => 'below',
  '#output__field_prefix' => '$',
  '#output__field_suffix' => 'USD',
];

Field widget example

Webform example

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

Read more about the rangeslider.js project:

rangeslider.js

range-slider-element (3.x)

v3.0.0

Important: Currently yet in early alpha testing phase! Please see #3516294: [META] 3.0.0 Plan for details

Read more about the range-slider-element project:

range-slider-element

🇵🇸

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