The Range Slider extension lets you add a fully styled, interactive range slider to any page in a campaign using metadata keys, no custom JavaScript required. This guide walks you through setup, configuration, and troubleshooting.
What you'll learn
- How to add the HTML placeholder and metadata keys a Range Slider needs
- How to configure the required, optional, and styling metadata keys
- How to read the slider's value from the data layer
- How to test and troubleshoot a Range Slider in QA Mode
How the Range Slider works
The slider:
- Syncs its value to a Digioh field
- Writes to the data layer (Digioh's internal store of page values) on every change
- Can be configured per page in multi-page campaigns
Set up the Range Slider
Step 1: Install the extension
Install the extension once from your Digioh account.
- Click your account dropdown (top right) and select Extensions.
- Find the Range Slider extension and install it.
Once installed, you can use this extension across all your campaigns.
Step 2: Add an HTML placeholder
In your campaign, add an HTML block with a div with a custom ID. For example: <div id='my-slider'></div>
Note: The slider won't appear while you're editing the page. Preview the page to see it render.
Each page with a slider must use a unique div ID. If two pages share an ID, the extension logs an ERROR in the notifier and blocks sliders until you fix the duplicate.
- Use descriptive names, like main-slider or ep1-slider, to avoid conflicts.
- This ID must exactly match your slider_target metadata value. IDs are case-sensitive.
Step 3: Add metadata keys
The metadata keys for the range slider are configured at the page level.
- In the editor, select the Layout tab.
- Scroll down and enable Page Metadata:
- Add the required keys using the + button. For example, for a weight slider ranging from 40–180 kg:
- slider_target: my-slider (must match the div ID from Step 2 exactly)
- slider_min: 40
- slider_max: 180
- slider_label: What is your current weight?
- (Optional) To sync the slider's value to a Digioh field, add slider_field with the value in the format custom_N
For example: slider_field: custom_4
See the full list of optional and styling keys below.
Metadata reference
Every metadata key the Range Slider extension supports, whether it's required, and its default (or example, for required keys):
Key | Required / Optional | Description | Example Value |
slider_target | Required | ID of the div where the slider renders | my-slider |
slider_min | Required | Minimum numeric value | 40 |
slider_max | Required | Maximum numeric value | 180 |
slider_label | Required | Label displayed above the slider | What is your current weight? |
slider_field | Required | Digioh field name to sync the value. Must be in the format custom_N | custom_5 |
slider_default | Optional | Starting value. Defaults to the midpoint of the min / max values. | 100 |
slider_step | Optional | How much the value will increment as users move the slider. Defaults to 1. | 5 |
slider_unit | Optional | Suffix text shown after the selected value | kgs |
slider_value_prefix | Optional | Prefix text shown before the selected value | Weight: |
slider_track_color | Optional | The color of the slider track | #00412d |
slider_thumb_color | Optional | The color of the thumb | #01d283 |
slider_thumb_size | Optional | The thumb size (px) | 15 |
slider_track_height | Optional | The Track height (px) | 5 |
slider_label_color | Optional | The color of the label text | inherit |
slider_font_size | Optional | The size of the value text | 16px |
Read the slider value
Every time the slider is changed, its value will be written to the Digioh data layer. It can be retrieved the following JavaScript call in a Digioh custom JavaScript snippet: api.getDataLayerValue('custom_5').
The value passed to getDataLayerValue() is the custom field configured in the slider_field page metadata.
The value can also be retrieved outside of Digioh's custom JavaScript by calling DIGIOH_API.getDataLayerValue('custom_5').
The current value of the slider will be returned as a string.
Troubleshooting
If you're having any issues with your slider, you can always check the Digioh Diagnostics panel in Preview mode or QA mode:
If any of the page metadata are misconfigured, errors will be shown.
The slider doesn't appear
- Confirm slider_target matches the div ID exactly. IDs are case-sensitive.
- Confirm the HTML block exists on the page.
- If the notifier shows a duplicate slider_target ID error, give each page with a slider a unique target ID.
ERROR: invalid slider_min or slider_max
- Values must be numeric only, no units or text.
The default value looks wrong
- Confirm slider_default falls between slider_min and slider_max.
ERROR: duplicate slider_target IDs
- Two or more pages share the same slider_target div ID. Give each page a unique target ID, like main-slider or ep1-slider.
That's it, your Range Slider extension is ready to go! Need a hand? Reach out to support@digioh.com.
Want to get more from Digioh?
Get the playbooks leading brands use to convert more visitors into revenue.
Browse the Playbooks ?Platform Tour
See what else you can do with Digioh in our self-guided platform tour.
Take the Tour ?