Released: June 12, 2025

SurveyJS v2.2.0 adds new Slider and Range Slider question types and implements Survey Creator API properties that restrict panels and questions from being nested inside other container elements and preserve the default question type when adding new questions.

SurveyJS v2.2.0 introduces two new interactive question types—Slider and Range Slider. The Slider allows users to select a single value by dragging a thumb along a predefined scale. The Range Slider lets users select a range using two thumbs. Users can also drag the entire selected range along the scale without changing the distance between the thumbs.

These components support the following features out of the box:

• Customizable scale (min, max, and step)
• Auto-generated or custom scale labels
• Thumb tooltips
• Label and tooltip formatting
• Range length limits
• Ability to swap thumbs and drag the selected range
• Binding to text input fields

To explore the new Slider and Range Slider in action, check out the following demos:

View Slider Demo

View Range Slider Demo

In Survey Creator, adding a Slider question will insert a single-value slider by default. To switch to a Range Slider, change the "Slider type" property to "Range" in the Property Grid.

Open Online Survey Creator

Along with regular questions, SurveyJS Form Library supports container elements, such as Panels and Dynamic Panels. By default, Survey Creator allows nesting these containers without limits, which can lead to complex and confusing UIs.

This release introduces API properties to help you restrict nesting rules.

The new maxPanelNestingLevel specifies the maximum depth allowed for nested Panels and Dynamic Panels. This property behaves as follows:

• A value of -1 (default) applies no restriction on nesting depth.
• A value of 0 means that Panels and Dynamic Panels cannot contain other panels—only questions are allowed.
• Positive integers specify the maximum nesting level.

For example, setting maxPanelNestingLevel to 1 allows Panels and Dynamic Panels to nest one additional panel level, but panels at that level can contain only questions, not further panels.

import { SurveyCreatorModel } from "survey-creator-core";

const creatorOptions = {
  // ...
  maxPanelNestingLevel: 1
};
const creator = new SurveyCreatorModel(creatorOptions);

The new forbiddenNestedElements lets you specify which element types are not allowed inside Panels and Dynamic Panels. It is an object with the following keys:

• panel: An array of element types that cannot be nested within a regular panel.
• paneldynamic: An array of element types that cannot be nested within a dynamic panel.

For example, the following configuration disallows dynamic panels inside regular panels, and disallows both regular and dynamic panels inside a dynamic panel:

import { SurveyCreatorModel } from "survey-creator-core";

const creatorOptions = {
  // ...
  forbiddenNestedElements: {
    panel: [ "paneldynamic" ],
    paneldynamic: [ "panel", "paneldynamic" ]
  }
};
const creator = new SurveyCreatorModel(creatorOptions);

In Survey Creator, the Add Question button lets users add new questions to their survey or form. By default, this button reuses the type of the most recently added question for subsequent additions. Starting with Survey Creator v2.2.0, a new rememberLastQuestionType property allows you to control this behavior. Set it to false to always add new questions using the default type—Single-Line Input—regardless of the previously added question type.

import { SurveyCreatorModel } from "survey-creator-core";
const creatorOptions = { ... };
const creator = new SurveyCreatorModel(creatorOptions);

creator.rememberLastQuestionType = false;

Content-Heavy Forms in Survey Creator

Form Library

• Signature is duplicated when the signature pad is wider than the question box and SVG is used as a data format (#10010)
• Advanced header produces unnecessary empty space (#9509)
• [Accessibility] <h3> tag within completedHtml, completedBeforeHtml, and loadingHtml produces accessibility errors (#9977)
• Loop and Merge: Users cannot cancel a new loop and return to the summary view (#9982)
• Loop and Merge: Going back and unselecting items in a loop driver question doesn't delete already created loops (#9963)
• Loop and Merge: Summary view is empty even though a valid object is assigned to survey.data (#9983)
• Loop and Merge: Summary view doesn't appear at startup even though survey.data is defined (#9984)
• Loop and Merge: Panel title pattern in Dynamic Matrix displays choice values instead of texts (#9994)
• Add the name of a source question to console warnings about invalid expressions (#9981)
• survey-react-ui cannot be updated along with the rest of the SurveyJS npm packages using Renovate (#9987)
• Dynamic Matrix: The Remove Row button is misaligned when a column is hidden (#10004)
• Dynamic Matrix: The Set Value trigger doesn't work on subsequent executions (#10017)
• [Survey Creator] Choice options with enabled isExclusive property disappear from the design surface after switching to the Preview tab and back (#10002)

Survey Creator

• The "Choices are copied from <question>" message ignores the useElementTitles property (#6947)
• The selected element is out of the viewport after switching from the Designer tab to Preview and back (#6937)
• Composite question with a Dynamic Panel allows modifying the internal structure of the Dynamic Panel and move it outside (#6935)
• Property Grid: A checkbox property within a detail form in misaligned (#6951)
• [Accessibility] Search button in a compact Toolbox doesn't have an accessible text (#6953)

Dashboard

• Bars in a Multi-Select Matrix visualizer (Stacked Bar) appear compressed vertically (#547)

npm i survey-core@2.2.0 survey-angular-ui@2.2.0 --save
npm i survey-creator-core@2.2.0 survey-creator-angular@2.2.0 --save
npm i survey-analytics@2.2.0 --save
npm i survey-pdf@2.2.0 --save

npm i survey-core@2.2.0 survey-react-ui@2.2.0 --save
npm i survey-creator-core@2.2.0 survey-creator-react@2.2.0 --save
npm i survey-analytics@2.2.0 --save
npm i survey-pdf@2.2.0 --save

npm i survey-core@2.2.0 survey-vue3-ui@2.2.0 --save
npm i survey-creator-core@2.2.0 survey-creator-vue@2.2.0 --save
npm i survey-analytics@2.2.0 --save
npm i survey-pdf@2.2.0 --save

<link href="https://unpkg.com/survey-core@2.2.0/survey-core.min.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/survey-core@2.2.0/survey.core.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/survey-js-ui@2.2.0/survey-js-ui.min.js"></script>

<script src="https://unpkg.com/survey-core@2.2.0/themes/index.min.js"></script>
<script src="https://unpkg.com/survey-creator-core@2.2.0/themes/index.min.js"></script>

<link href="https://unpkg.com/survey-creator-core@2.2.0/survey-creator-core.min.css" type="text/css" rel="stylesheet">
<script src="https://unpkg.com/survey-creator-core@2.2.0/survey-creator-core.min.js"></script>
<script src="https://unpkg.com/survey-creator-js@2.2.0/survey-creator-js.min.js"></script>

<link href="https://unpkg.com/survey-analytics@2.2.0/survey.analytics.min.css" rel="stylesheet">
<script src="https://unpkg.com/survey-analytics@2.2.0/survey.analytics.min.js"></script>

<script src="https://unpkg.com/survey-pdf@2.2.0/survey.pdf.min.js"></script>
<script src="https://unpkg.com/survey-pdf@2.2.0/pdf-form-filler.min.js"></script>