CMS: Adding and Setting Up a Range Slider

2 min read
This element is not yet available in Editor X.
Add a range slider to your site to display a range of values. You can set the range slider so that your site visitors can interact with it and move the handles to set their own values.
Before you begin:
To add a range slider to your page, you must add the CMS.
A screenshot showing a range slider element with the title 'What is your price range?'

To add and set up a range slider:

  1. Click Add on the left side of the Editor.
  2. Click Input.
  3. Click Slider.
  4. Click the range slider of your choice.
  5. Click Settings
  6. Add a title for your range slider in the Field title field.
  7. Select the type of slider:
    • Continuous: Users can select any value within the range you define.
    • Stepped: Users can select specific values, which let you control the data users can submit. Select an option under Set steps by:
      • Number: Enter the number of steps. 
      • Value: Enter a step value. This controls the space between the steps.
  8. Enter the Minimum value your visitor can choose.
  9. Enter the Maximum value your visitor can choose.
  10. Enter the Selected minimum value. This is the minimum value set when your page first loads. 
  11. Enter the Selected maximum value. This is the maximum value set when your page first loads. 
  12. (Stepped slider type only) Enter a value for the tooltip that appears when visitors hover over the slider handle:
    • Prefix: This appears to the left of the step value (e.g. $).
    • Suffix: This appears to the right of the step value (e.g. %).
A screenshot showing a stepped range slider with the $30 selected maximum value highlighted.
  1. (Optional) Select the Read only checkbox to display a value range that visitors cannot adjust.