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.

Keywords: A11y

Image Compare Accessible Slider

Merge Requests

!1GitlabCI test fixesMerged

Issues

NoneClosed: outdatedCode Created about 2 months ago

!1GitlabCI test fixes
Merged

None
Closed: outdated
Code
Created about 2 months ago