Drupal is a registered trademark of Dries Buytaert
Protected Pages 3.0.0 — Major update available for module protected_pages (3.0.0). Commerce Core 3.3.8 — Minor update available for module commerce (3.3.8). Layout Builder Reorder 2.0.1 — Minor update available for module layout_builder_reorder (2.0.1). Ban 1.1.0 — Minor update available for module ban (1.1.0). Field Formatter Range 2.0.0 — Major update available for module field_formatter_range (2.0.0). Field Formatter Range 8.x-1.8 — Minor update available for module field_formatter_range (8.x-1.8). UI Patterns (SDC in Drupal UI) 2.0.18 — Minor update available for module ui_patterns (2.0.18). Varbase FAQs 9.2.1 — Minor update available for module varbase_faqs (9.2.1). Search API Solr 4.3.11 — Module search_api_solr updated after 14 months of inactivity (4.3.11). Provus Mega Menu — Module provus_mega_menu crossed 1,000 active installs.
← All modules

Image Compare Accessible Slider

65 sites Security covered
View on drupal.org

This module adds an accessible image comparison slider to your Drupal site, allowing users to view two images side-by-side with a slider. It supports custom captions and offers flexible configuration options for the slider's behavior and appearance.

This module provides a new formatter for image fields using the Image Compare javascript library.

The main point of interest of this library is the use of a simple HTML input element of type range to implement the slider. This makes it one of the most accessible image comparison slider available at the moment.

Installation

  • Download and enable the module.
  • Check the README file for the image-compare javascript library installation instructions.
  • Select Image Compare Accessible Slider formatter in your multivalued image field display configuration.
  • Remember that you have to upload at least 2 images.

A dedicated submodule, Image Compare Accessible Slider for Media, allows to extend this module to make it compatible with medias of type Image (or referencing other medias of type Image via this module).

Configuration

  • A custom starting point between 0 and 100 can be specified (default: 50).
  • alt or title image attributes can be used as a caption.
  • A custom field can also be used as a caption, useful with custom media images for example.
  • A custom field can be used to override the global field formatter configuration options with some content specific ones which allows more flexibility than most other available sliders.
  • Captions are optional and can be disabled globally, by not specifying any caption field, or on a per-instance basis by using a custom options field.

Available configuration options

  • label_text: usage explanation message for screen readers.
  • keyboard_step: the keyboard step, higher value can improve keyboard usability.
  • step: can be set to value below 1, 0.01 for example, to improve smoothness when using the mouse to slide. Use in conjunction with keyboard_step configuration option above.
  • show_captions: set to false to remove captions.
  • starting_position: starting position of the slider between 0 and 100.

Around the Web

Keywords: A11y

Activity

Total releases
4
First release
Apr 2025
Latest release
3 days ago
Releases (12 mo)
2
Maintenance
Active

Release Timeline

Releases

Version Type Release date
1.1.0-beta1 Pre-release Jul 14, 2026
1.0.3 Stable Oct 11, 2025
1.x-dev Dev Apr 20, 2025
1.0.2 Stable Apr 19, 2025