Survey Now v2.2.0
Released: June 12, 2025
Survey Now 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.
New Slider and Range Slider Question Types
Survey Now 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:
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.
Survey Creator: Restrict panels and questions from being nested inside other container elements
Along with regular questions, Survey Now 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.
Limit the maximum nesting level for panels
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);
Forbid nesting certain element types
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);
Survey Creator: Preserve the default question type when adding new questions
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;
New and Updated Demos
Content-Heavy Forms in Survey Creator
Bug Fixes and Minor Enhancements
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 withincompletedHtml,completedBeforeHtml, andloadingHtmlproduces 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.datais 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-uicannot be updated along with the rest of the Survey Now 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
isExclusiveproperty 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
useElementTitlesproperty (#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)
How to Update Survey Now Libraries in Your Application
Angular
npm i [email protected] [email protected] --save
npm i [email protected] [email protected] --save
npm i [email protected] --save
npm i [email protected] --save
React
npm i [email protected] [email protected] --save
npm i [email protected] [email protected] --save
npm i [email protected] --save
npm i [email protected] --save
Vue.js
npm i [email protected] [email protected] --save
npm i [email protected] [email protected] --save
npm i [email protected] --save
npm i [email protected] --save
HTML/CSS/JavaScript
<link href="https://unpkg.com/[email protected]/survey-core.min.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/[email protected]/survey.core.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/[email protected]/survey-js-ui.min.js"></script>
<script src="https://unpkg.com/[email protected]/themes/index.min.js"></script>
<script src="https://unpkg.com/[email protected]/themes/index.min.js"></script>
<link href="https://unpkg.com/[email protected]/survey-creator-core.min.css" type="text/css" rel="stylesheet">
<script src="https://unpkg.com/[email protected]/survey-creator-core.min.js"></script>
<script src="https://unpkg.com/[email protected]/survey-creator-js.min.js"></script>
<link href="https://unpkg.com/[email protected]/survey.analytics.min.css" rel="stylesheet">
<script src="https://unpkg.com/[email protected]/survey.analytics.min.js"></script>
<script src="https://unpkg.com/[email protected]/survey.pdf.min.js"></script>
<script src="https://unpkg.com/[email protected]/pdf-form-filler.min.js"></script>