Range Slider
Provides integration with rangeslider.js library to enhance HTML5 range input elements with a beautiful, customizable slider interface.
range_slider
Install
composer require 'drupal/range_slider:^2.1'
composer require 'drupal/range_slider:8.x-1.5'
Overview
Range Slider module provides Drupal integration with the popular rangeslider.js JavaScript library. It wraps HTML5 range input elements with an enhanced slider interface that offers better visual feedback and user experience.
The module provides both a field widget for use with integer, decimal, and float field types, as well as a form element API that developers can use in custom forms. It supports horizontal and vertical orientations, and can optionally display the current value in various positions relative to the slider.
For sites using the Webform module, Range Slider also provides a webform element that can be added to any webform, allowing form builders to collect numeric values using an intuitive slider interface.
Features
- Field widget for integer, decimal, and float field types that renders a visual range slider instead of a standard number input
- Custom form element (#type => 'range_slider') for use in custom forms and modules
- Support for horizontal and vertical slider orientations
- Optional value output display positioned below, above, left, or right of the slider
- Customizable prefix and suffix for displayed values (e.g., '$50 USD')
- Webform integration providing a range slider element for webform builders
- Uses rangeslider.js library loaded from CDN (jsDelivr) for modern browser compatibility
- Respects field minimum and maximum value settings from field configuration
- AJAX-compatible form element processing
- Clean, minimal CSS with margin spacing for proper layout integration
Use Cases
Product quantity selection
Use Range Slider on e-commerce product pages to allow customers to select quantities. Configure with appropriate min/max values and display the current value above or below the slider for clear feedback.
Rating or satisfaction surveys
Implement satisfaction scales or rating systems where users slide to indicate their level of agreement or satisfaction on a numeric scale.
Price range filtering
Create price range selectors in views exposed filters or custom search forms, allowing users to visually select their budget range.
Volume or intensity controls
Use vertical orientation sliders for volume controls, intensity settings, or any interface that benefits from a vertical slider metaphor.
Donation amount selection
Allow donors to select donation amounts using a slider, with prefix and suffix options to display currency symbols and units (e.g., '$50 USD').
Webform numeric input
For sites using Webform, add range slider elements to forms collecting numeric data like age ranges, quantity preferences, or numeric ratings.
Tips
- Field minimum and maximum values are respected - configure these in the field settings to limit the slider range
- Use the 'output' setting to show real-time value feedback as users drag the slider
- For price or currency inputs, use #output__field_prefix and #output__field_suffix to add currency symbols
- Vertical sliders work well for volume controls or when horizontal space is limited
- The slider automatically attaches to AJAX-enabled forms and reinitializes after AJAX refreshes
- When using the form element API, all properties from the core Range element are inherited (like #step for increment values)
Technical Details
Hooks 1
hook_help
Implements hook_help() to display the README.md content on the module help page. If the Markdown module is installed, the README is rendered as formatted HTML; otherwise, it is displayed as preformatted text.