survey-js-ui 2.1.1 → 2.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "survey-js-ui",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "description": "survey.js is a JavaScript Survey Library. It is a modern way to add a survey to your website. It uses JSON for survey metadata and results.",
   "keywords": [
     "Survey",
@@ -31,7 +31,7 @@
   },
   "dependencies": {},
   "peerDependencies": {
-    "survey-core": "2.1.1",
+    "survey-core": "2.2.0",
     "@types/react-dom": "*",
     "@types/react": "*"
   }

package/survey-js-ui.js

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v2.1.1
+ * surveyjs - Survey JavaScript library v2.2.0
  * Copyright (c) 2015-2025 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -23,7 +23,7 @@ return /******/ (() => { // webpackBootstrap
 /***/ (function(module) {
 
 /*!
- * surveyjs - Survey JavaScript library v2.1.1
+ * surveyjs - Survey JavaScript library v2.2.0
  * Copyright (c) 2015-2025 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -830,7 +830,7 @@ path.keys().forEach(function (key) {
 /***/ (function(module) {
 
 /*!
- * surveyjs - Survey JavaScript library v2.1.1
+ * surveyjs - Survey JavaScript library v2.2.0
  * Copyright (c) 2015-2025 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -1639,20 +1639,20 @@ path.keys().forEach(function (key) {
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   CharacterCounterComponent: () => (/* reexport safe */ _src_components_character_counter__WEBPACK_IMPORTED_MODULE_81__.CharacterCounterComponent),
-/* harmony export */   ComponentsContainer: () => (/* reexport safe */ _src_components_components_container__WEBPACK_IMPORTED_MODULE_80__.ComponentsContainer),
-/* harmony export */   Header: () => (/* reexport safe */ _src_components_header__WEBPACK_IMPORTED_MODULE_82__.Header),
-/* harmony export */   HeaderCell: () => (/* reexport safe */ _src_components_header__WEBPACK_IMPORTED_MODULE_82__.HeaderCell),
-/* harmony export */   HeaderMobile: () => (/* reexport safe */ _src_components_header__WEBPACK_IMPORTED_MODULE_82__.HeaderMobile),
+/* harmony export */   CharacterCounterComponent: () => (/* reexport safe */ _src_components_character_counter__WEBPACK_IMPORTED_MODULE_82__.CharacterCounterComponent),
+/* harmony export */   ComponentsContainer: () => (/* reexport safe */ _src_components_components_container__WEBPACK_IMPORTED_MODULE_81__.ComponentsContainer),
+/* harmony export */   Header: () => (/* reexport safe */ _src_components_header__WEBPACK_IMPORTED_MODULE_83__.Header),
+/* harmony export */   HeaderCell: () => (/* reexport safe */ _src_components_header__WEBPACK_IMPORTED_MODULE_83__.HeaderCell),
+/* harmony export */   HeaderMobile: () => (/* reexport safe */ _src_components_header__WEBPACK_IMPORTED_MODULE_83__.HeaderMobile),
 /* harmony export */   List: () => (/* reexport safe */ _src_components_list_list__WEBPACK_IMPORTED_MODULE_59__.List),
 /* harmony export */   ListItemContent: () => (/* reexport safe */ _src_components_list_list_item_content__WEBPACK_IMPORTED_MODULE_57__.ListItemContent),
 /* harmony export */   ListItemGroup: () => (/* reexport safe */ _src_components_list_list_item_group__WEBPACK_IMPORTED_MODULE_58__.ListItemGroup),
-/* harmony export */   LoadingIndicatorComponent: () => (/* reexport safe */ _src_components_loading_indicator__WEBPACK_IMPORTED_MODULE_85__.LoadingIndicatorComponent),
+/* harmony export */   LoadingIndicatorComponent: () => (/* reexport safe */ _src_components_loading_indicator__WEBPACK_IMPORTED_MODULE_86__.LoadingIndicatorComponent),
 /* harmony export */   LogoImage: () => (/* reexport safe */ _src_components_survey_header_logo_image__WEBPACK_IMPORTED_MODULE_63__.LogoImage),
-/* harmony export */   MatrixRow: () => (/* reexport safe */ _src_components_matrix_row__WEBPACK_IMPORTED_MODULE_76__.MatrixRow),
-/* harmony export */   NotifierComponent: () => (/* reexport safe */ _src_components_notifier__WEBPACK_IMPORTED_MODULE_79__.NotifierComponent),
+/* harmony export */   MatrixRow: () => (/* reexport safe */ _src_components_matrix_row__WEBPACK_IMPORTED_MODULE_77__.MatrixRow),
+/* harmony export */   NotifierComponent: () => (/* reexport safe */ _src_components_notifier__WEBPACK_IMPORTED_MODULE_80__.NotifierComponent),
 /* harmony export */   Popup: () => (/* reexport safe */ _src_components_popup_popup__WEBPACK_IMPORTED_MODULE_56__.Popup),
-/* harmony export */   PopupModal: () => (/* reexport safe */ _src_components_popup_popup_modal__WEBPACK_IMPORTED_MODULE_87__.PopupModal),
+/* harmony export */   PopupModal: () => (/* reexport safe */ _src_components_popup_popup_modal__WEBPACK_IMPORTED_MODULE_88__.PopupModal),
 /* harmony export */   PopupSurvey: () => (/* reexport safe */ _src_react_popup_survey__WEBPACK_IMPORTED_MODULE_47__.PopupSurvey),
 /* harmony export */   QuestionErrorComponent: () => (/* reexport safe */ _src_components_question_error__WEBPACK_IMPORTED_MODULE_75__.QuestionErrorComponent),
 /* harmony export */   RatingDropdownItem: () => (/* reexport safe */ _src_components_rating_rating_dropdown_item__WEBPACK_IMPORTED_MODULE_16__.RatingDropdownItem),
@@ -1663,8 +1663,9 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   ReactQuestionFactory: () => (/* reexport safe */ _src_reactquestion_factory__WEBPACK_IMPORTED_MODULE_48__.ReactQuestionFactory),
 /* harmony export */   ReactSurveyElement: () => (/* reexport safe */ _src_reactquestion_element__WEBPACK_IMPORTED_MODULE_9__.ReactSurveyElement),
 /* harmony export */   ReactSurveyElementsWrapper: () => (/* reexport safe */ _src_reactsurveymodel__WEBPACK_IMPORTED_MODULE_1__.ReactSurveyElementsWrapper),
-/* harmony export */   Scroll: () => (/* reexport safe */ _src_components_scroll__WEBPACK_IMPORTED_MODULE_78__.Scroll),
-/* harmony export */   Skeleton: () => (/* reexport safe */ _src_components_skeleton__WEBPACK_IMPORTED_MODULE_77__.Skeleton),
+/* harmony export */   Scroll: () => (/* reexport safe */ _src_components_scroll__WEBPACK_IMPORTED_MODULE_79__.Scroll),
+/* harmony export */   Skeleton: () => (/* reexport safe */ _src_components_skeleton__WEBPACK_IMPORTED_MODULE_78__.Skeleton),
+/* harmony export */   SliderLabelItem: () => (/* reexport safe */ _src_components_slider_slider_label_item__WEBPACK_IMPORTED_MODULE_76__.SliderLabelItem),
 /* harmony export */   Survey: () => (/* reexport safe */ _src_reactSurvey__WEBPACK_IMPORTED_MODULE_0__.Survey),
 /* harmony export */   SurveyActionBar: () => (/* reexport safe */ _src_components_action_bar_action_bar__WEBPACK_IMPORTED_MODULE_62__.SurveyActionBar),
 /* harmony export */   SurveyElementBase: () => (/* reexport safe */ _src_reactquestion_element__WEBPACK_IMPORTED_MODULE_9__.SurveyElementBase),
@@ -1673,8 +1674,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   SurveyFilePreview: () => (/* reexport safe */ _src_components_file_file_preview__WEBPACK_IMPORTED_MODULE_28__.SurveyFilePreview),
 /* harmony export */   SurveyFlowPanel: () => (/* reexport safe */ _src_flow_panel__WEBPACK_IMPORTED_MODULE_7__.SurveyFlowPanel),
 /* harmony export */   SurveyHeader: () => (/* reexport safe */ _src_components_survey_header_survey_header__WEBPACK_IMPORTED_MODULE_64__.SurveyHeader),
-/* harmony export */   SurveyLocStringEditor: () => (/* reexport safe */ _src_string_editor__WEBPACK_IMPORTED_MODULE_84__.SurveyLocStringEditor),
-/* harmony export */   SurveyLocStringViewer: () => (/* reexport safe */ _src_string_viewer__WEBPACK_IMPORTED_MODULE_83__.SurveyLocStringViewer),
+/* harmony export */   SurveyLocStringEditor: () => (/* reexport safe */ _src_string_editor__WEBPACK_IMPORTED_MODULE_85__.SurveyLocStringEditor),
+/* harmony export */   SurveyLocStringViewer: () => (/* reexport safe */ _src_string_viewer__WEBPACK_IMPORTED_MODULE_84__.SurveyLocStringViewer),
 /* harmony export */   SurveyNavigationBase: () => (/* reexport safe */ _src_reactSurveyNavigationBase__WEBPACK_IMPORTED_MODULE_2__.SurveyNavigationBase),
 /* harmony export */   SurveyNavigationButton: () => (/* reexport safe */ _src_components_survey_actions_survey_nav_button__WEBPACK_IMPORTED_MODULE_74__.SurveyNavigationButton),
 /* harmony export */   SurveyPage: () => (/* reexport safe */ _src_page__WEBPACK_IMPORTED_MODULE_4__.SurveyPage),
@@ -1739,7 +1740,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   SurveyRow: () => (/* reexport safe */ _src_row__WEBPACK_IMPORTED_MODULE_5__.SurveyRow),
 /* harmony export */   SurveyTimerPanel: () => (/* reexport safe */ _src_reacttimerpanel__WEBPACK_IMPORTED_MODULE_3__.SurveyTimerPanel),
 /* harmony export */   SurveyWindow: () => (/* reexport safe */ _src_react_popup_survey__WEBPACK_IMPORTED_MODULE_47__.SurveyWindow),
-/* harmony export */   SvgBundleComponent: () => (/* reexport safe */ _src_svgbundle__WEBPACK_IMPORTED_MODULE_86__.SvgBundleComponent),
+/* harmony export */   SvgBundleComponent: () => (/* reexport safe */ _src_svgbundle__WEBPACK_IMPORTED_MODULE_87__.SvgBundleComponent),
 /* harmony export */   SvgIcon: () => (/* reexport safe */ _src_components_svg_icon_svg_icon__WEBPACK_IMPORTED_MODULE_65__.SvgIcon),
 /* harmony export */   TagboxFilterString: () => (/* reexport safe */ _src_tagbox_filter__WEBPACK_IMPORTED_MODULE_17__.TagboxFilterString),
 /* harmony export */   TitleActions: () => (/* reexport safe */ _src_components_title_title_actions__WEBPACK_IMPORTED_MODULE_60__.TitleActions),
@@ -1822,18 +1823,19 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _src_components_paneldynamic_actions_paneldynamic_progress_text__WEBPACK_IMPORTED_MODULE_73__ = __webpack_require__(/*! ../src/components/paneldynamic-actions/paneldynamic-progress-text */ "../survey-react-ui/src/components/paneldynamic-actions/paneldynamic-progress-text.tsx");
 /* harmony import */ var _src_components_survey_actions_survey_nav_button__WEBPACK_IMPORTED_MODULE_74__ = __webpack_require__(/*! ../src/components/survey-actions/survey-nav-button */ "../survey-react-ui/src/components/survey-actions/survey-nav-button.tsx");
 /* harmony import */ var _src_components_question_error__WEBPACK_IMPORTED_MODULE_75__ = __webpack_require__(/*! ../src/components/question-error */ "../survey-react-ui/src/components/question-error.tsx");
-/* harmony import */ var _src_components_matrix_row__WEBPACK_IMPORTED_MODULE_76__ = __webpack_require__(/*! ../src/components/matrix/row */ "../survey-react-ui/src/components/matrix/row.tsx");
-/* harmony import */ var _src_components_skeleton__WEBPACK_IMPORTED_MODULE_77__ = __webpack_require__(/*! ../src/components/skeleton */ "../survey-react-ui/src/components/skeleton.tsx");
-/* harmony import */ var _src_components_scroll__WEBPACK_IMPORTED_MODULE_78__ = __webpack_require__(/*! ../src/components/scroll */ "../survey-react-ui/src/components/scroll.tsx");
-/* harmony import */ var _src_components_notifier__WEBPACK_IMPORTED_MODULE_79__ = __webpack_require__(/*! ../src/components/notifier */ "../survey-react-ui/src/components/notifier.tsx");
-/* harmony import */ var _src_components_components_container__WEBPACK_IMPORTED_MODULE_80__ = __webpack_require__(/*! ../src/components/components-container */ "../survey-react-ui/src/components/components-container.tsx");
-/* harmony import */ var _src_components_character_counter__WEBPACK_IMPORTED_MODULE_81__ = __webpack_require__(/*! ../src/components/character-counter */ "../survey-react-ui/src/components/character-counter.tsx");
-/* harmony import */ var _src_components_header__WEBPACK_IMPORTED_MODULE_82__ = __webpack_require__(/*! ../src/components/header */ "../survey-react-ui/src/components/header.tsx");
-/* harmony import */ var _src_string_viewer__WEBPACK_IMPORTED_MODULE_83__ = __webpack_require__(/*! ../src/string-viewer */ "../survey-react-ui/src/string-viewer.tsx");
-/* harmony import */ var _src_string_editor__WEBPACK_IMPORTED_MODULE_84__ = __webpack_require__(/*! ../src/string-editor */ "../survey-react-ui/src/string-editor.tsx");
-/* harmony import */ var _src_components_loading_indicator__WEBPACK_IMPORTED_MODULE_85__ = __webpack_require__(/*! ../src/components/loading-indicator */ "../survey-react-ui/src/components/loading-indicator.tsx");
-/* harmony import */ var _src_svgbundle__WEBPACK_IMPORTED_MODULE_86__ = __webpack_require__(/*! ../src/svgbundle */ "../survey-react-ui/src/svgbundle.tsx");
-/* harmony import */ var _src_components_popup_popup_modal__WEBPACK_IMPORTED_MODULE_87__ = __webpack_require__(/*! ../src/components/popup/popup-modal */ "../survey-react-ui/src/components/popup/popup-modal.tsx");
+/* harmony import */ var _src_components_slider_slider_label_item__WEBPACK_IMPORTED_MODULE_76__ = __webpack_require__(/*! ../src/components/slider/slider-label-item */ "../survey-react-ui/src/components/slider/slider-label-item.tsx");
+/* harmony import */ var _src_components_matrix_row__WEBPACK_IMPORTED_MODULE_77__ = __webpack_require__(/*! ../src/components/matrix/row */ "../survey-react-ui/src/components/matrix/row.tsx");
+/* harmony import */ var _src_components_skeleton__WEBPACK_IMPORTED_MODULE_78__ = __webpack_require__(/*! ../src/components/skeleton */ "../survey-react-ui/src/components/skeleton.tsx");
+/* harmony import */ var _src_components_scroll__WEBPACK_IMPORTED_MODULE_79__ = __webpack_require__(/*! ../src/components/scroll */ "../survey-react-ui/src/components/scroll.tsx");
+/* harmony import */ var _src_components_notifier__WEBPACK_IMPORTED_MODULE_80__ = __webpack_require__(/*! ../src/components/notifier */ "../survey-react-ui/src/components/notifier.tsx");
+/* harmony import */ var _src_components_components_container__WEBPACK_IMPORTED_MODULE_81__ = __webpack_require__(/*! ../src/components/components-container */ "../survey-react-ui/src/components/components-container.tsx");
+/* harmony import */ var _src_components_character_counter__WEBPACK_IMPORTED_MODULE_82__ = __webpack_require__(/*! ../src/components/character-counter */ "../survey-react-ui/src/components/character-counter.tsx");
+/* harmony import */ var _src_components_header__WEBPACK_IMPORTED_MODULE_83__ = __webpack_require__(/*! ../src/components/header */ "../survey-react-ui/src/components/header.tsx");
+/* harmony import */ var _src_string_viewer__WEBPACK_IMPORTED_MODULE_84__ = __webpack_require__(/*! ../src/string-viewer */ "../survey-react-ui/src/string-viewer.tsx");
+/* harmony import */ var _src_string_editor__WEBPACK_IMPORTED_MODULE_85__ = __webpack_require__(/*! ../src/string-editor */ "../survey-react-ui/src/string-editor.tsx");
+/* harmony import */ var _src_components_loading_indicator__WEBPACK_IMPORTED_MODULE_86__ = __webpack_require__(/*! ../src/components/loading-indicator */ "../survey-react-ui/src/components/loading-indicator.tsx");
+/* harmony import */ var _src_svgbundle__WEBPACK_IMPORTED_MODULE_87__ = __webpack_require__(/*! ../src/svgbundle */ "../survey-react-ui/src/svgbundle.tsx");
+/* harmony import */ var _src_components_popup_popup_modal__WEBPACK_IMPORTED_MODULE_88__ = __webpack_require__(/*! ../src/components/popup/popup-modal */ "../survey-react-ui/src/components/popup/popup-modal.tsx");
 // react
 
 
@@ -1921,6 +1923,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
 
 
 //Uncomment to include the "date" question type.
@@ -5219,6 +5222,80 @@ _element_factory__WEBPACK_IMPORTED_MODULE_1__.ReactElementFactory.Instance.regis
 });
 
 
+/***/ }),
+
+/***/ "../survey-react-ui/src/components/slider/slider-label-item.tsx":
+/*!**********************************************************************!*\
+  !*** ../survey-react-ui/src/components/slider/slider-label-item.tsx ***!
+  \**********************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   SliderLabelItem: () => (/* binding */ SliderLabelItem)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/preact/compat/dist/compat.module.js");
+/* harmony import */ var _element_factory__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../element-factory */ "../survey-react-ui/src/element-factory.tsx");
+/* harmony import */ var _reactquestion_element__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../reactquestion_element */ "../survey-react-ui/src/reactquestion_element.tsx");
+var __extends = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+
+
+
+var SliderLabelItem = /** @class */ (function (_super) {
+    __extends(SliderLabelItem, _super);
+    function SliderLabelItem() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    SliderLabelItem.prototype.getStateElement = function () {
+        return this.item;
+    };
+    Object.defineProperty(SliderLabelItem.prototype, "item", {
+        get: function () {
+            return this.props.item;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SliderLabelItem.prototype, "question", {
+        get: function () {
+            return this.props.question;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    SliderLabelItem.prototype.componentDidUpdate = function (prevProps, prevState) {
+        _super.prototype.componentDidUpdate.call(this, prevProps, prevState);
+    };
+    SliderLabelItem.prototype.renderElement = function () {
+        var _a = this.question, cssClasses = _a.cssClasses, handleLabelPointerUp = _a.handleLabelPointerUp, getLabelCss = _a.getLabelCss, getPercent = _a.getPercent;
+        var _b = this.item, value = _b.value, locText = _b.locText;
+        return react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { key: this.item.id, className: getLabelCss(locText), style: { left: getPercent(value) + "%" }, onPointerUp: function (e) { handleLabelPointerUp(e.nativeEvent, value); } },
+            react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: cssClasses.labelTick }),
+            react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: cssClasses.labelText }, this.renderLocString(locText)));
+    };
+    return SliderLabelItem;
+}(_reactquestion_element__WEBPACK_IMPORTED_MODULE_2__.SurveyElementBase));
+
+_element_factory__WEBPACK_IMPORTED_MODULE_1__.ReactElementFactory.Instance.registerElement("sv-slider-label-item", function (props) {
+    return react__WEBPACK_IMPORTED_MODULE_0__.createElement(SliderLabelItem, props);
+});
+
+
 /***/ }),
 
 /***/ "../survey-react-ui/src/components/survey-actions/survey-nav-button.tsx":
@@ -12119,6 +12196,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/preact/compat/dist/compat.module.js");
 /* harmony import */ var _reactquestion_element__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./reactquestion_element */ "../survey-react-ui/src/reactquestion_element.tsx");
 /* harmony import */ var _reactquestion_factory__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./reactquestion_factory */ "../survey-react-ui/src/reactquestion_factory.tsx");
+/* harmony import */ var _element_factory__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./element-factory */ "../survey-react-ui/src/element-factory.tsx");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -12137,6 +12215,7 @@ var __extends = (undefined && undefined.__extends) || (function () {
 
 
 
+
 var SurveyQuestionSlider = /** @class */ (function (_super) {
     __extends(SurveyQuestionSlider, _super);
     function SurveyQuestionSlider(props) {
@@ -12176,7 +12255,7 @@ var SurveyQuestionSlider = /** @class */ (function (_super) {
     };
     SurveyQuestionSlider.prototype.getInputsAndThumbs = function () {
         var inputsAndThumbs = [];
-        var value = this.question.getRenderedValue();
+        var value = this.question.renderedValue;
         for (var i = 0; i < value.length; i++) {
             var thumbAndInput = react__WEBPACK_IMPORTED_MODULE_0__.createElement(react__WEBPACK_IMPORTED_MODULE_0__.Fragment, { key: i },
                 this.getInput(i),
@@ -12186,8 +12265,8 @@ var SurveyQuestionSlider = /** @class */ (function (_super) {
         return inputsAndThumbs;
     };
     SurveyQuestionSlider.prototype.getThumb = function (i) {
-        var _a = this.question, cssClasses = _a.cssClasses, getThumbContainerCss = _a.getThumbContainerCss, tooltipVisibility = _a.tooltipVisibility, tooltipCss = _a.tooltipCss, getPercent = _a.getPercent, getRenderedValue = _a.getRenderedValue, getTooltipValue = _a.getTooltipValue;
-        var value = getRenderedValue()[i];
+        var _a = this.question, cssClasses = _a.cssClasses, getThumbContainerCss = _a.getThumbContainerCss, tooltipVisibility = _a.tooltipVisibility, tooltipCss = _a.tooltipCss, getPercent = _a.getPercent, renderedValue = _a.renderedValue, getTooltipValue = _a.getTooltipValue;
+        var value = renderedValue[i];
         var tooltip = null;
         if (tooltipVisibility !== "never") {
             tooltip = react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: tooltipCss },
@@ -12201,8 +12280,8 @@ var SurveyQuestionSlider = /** @class */ (function (_super) {
         return thumb;
     };
     SurveyQuestionSlider.prototype.getInput = function (i) {
-        var _a = this.question, max = _a.renderedMax, min = _a.renderedMin, step = _a.step, cssClasses = _a.cssClasses, isDisabledAttr = _a.isDisabledAttr, getRenderedValue = _a.getRenderedValue, handleOnChange = _a.handleOnChange, handlePointerDown = _a.handlePointerDown, handlePointerUp = _a.handlePointerUp, handleKeyDown = _a.handleKeyDown, handleKeyUp = _a.handleKeyUp, handleOnFocus = _a.handleOnFocus, handleOnBlur = _a.handleOnBlur;
-        var value = getRenderedValue()[i];
+        var _a = this.question, max = _a.renderedMax, min = _a.renderedMin, step = _a.step, cssClasses = _a.cssClasses, isDisabledAttr = _a.isDisabledAttr, renderedValue = _a.renderedValue, handleOnChange = _a.handleOnChange, handlePointerDown = _a.handlePointerDown, handlePointerUp = _a.handlePointerUp, handleKeyDown = _a.handleKeyDown, handleKeyUp = _a.handleKeyUp, handleOnFocus = _a.handleOnFocus, handleOnBlur = _a.handleOnBlur;
+        var value = renderedValue[i];
         var input = react__WEBPACK_IMPORTED_MODULE_0__.createElement("input", { className: cssClasses.input, id: "sjs-slider-input-" + i, type: "range", min: min, max: max, step: step, value: value, onChange: function (e) { handleOnChange(e.nativeEvent, i); }, onPointerDown: function (e) { handlePointerDown(e.nativeEvent); }, onPointerUp: function (e) { e.stopPropagation(); handlePointerUp(e.nativeEvent); }, onKeyDown: function (e) { handleKeyDown(e.nativeEvent); }, onKeyUp: function (e) { handleKeyUp(e.nativeEvent); }, onFocus: function () { handleOnFocus(i); }, onBlur: function () { handleOnBlur(); }, disabled: isDisabledAttr, "aria-required": this.question.a11y_input_ariaRequired, "aria-label": this.question.a11y_input_ariaLabel, "aria-labelledby": this.question.a11y_input_ariaLabelledBy, "aria-describedby": this.question.a11y_input_ariaDescribedBy, "aria-invalid": this.question.a11y_input_ariaInvalid, "aria-errormessage": this.question.a11y_input_ariaErrormessage });
         return input;
     };
@@ -12213,18 +12292,10 @@ var SurveyQuestionSlider = /** @class */ (function (_super) {
     };
     SurveyQuestionSlider.prototype.getLabels = function () {
         var labels = [];
-        var _a = this.question, renderedLabels = _a.renderedLabels, cssClasses = _a.cssClasses, handleLabelPointerUp = _a.handleLabelPointerUp, getLabelCss = _a.getLabelCss;
-        var _loop_1 = function (i) {
-            var value = renderedLabels[i].value;
-            var text = renderedLabels[i].locText;
-            var label = react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { key: i, className: getLabelCss(i), style: { left: value + "%" }, onPointerUp: function (e) { handleLabelPointerUp(e.nativeEvent, i); } },
-                react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: cssClasses.labelTick }),
-                react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: cssClasses.labelText }, this_1.renderLocString(text)));
-            labels.push(label);
-        };
-        var this_1 = this;
+        var _a = this.question, renderedLabels = _a.renderedLabels, cssClasses = _a.cssClasses;
         for (var i = 0; i < renderedLabels.length; i++) {
-            _loop_1(i);
+            var label = _element_factory__WEBPACK_IMPORTED_MODULE_3__.ReactElementFactory.Instance.createElement("sv-slider-label-item", { item: renderedLabels[i], question: this.question, key: renderedLabels[i].id });
+            labels.push(label);
         }
         return react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", { className: cssClasses.labelsContainer },
             react__WEBPACK_IMPORTED_MODULE_0__.createElement("div", null, labels));
@@ -13510,6 +13581,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   ReactSurveyElementsWrapper: () => (/* reexport safe */ _survey_react_ui_entries_react_ui_model__WEBPACK_IMPORTED_MODULE_1__.ReactSurveyElementsWrapper),
 /* harmony export */   Scroll: () => (/* reexport safe */ _survey_react_ui_entries_react_ui_model__WEBPACK_IMPORTED_MODULE_1__.Scroll),
 /* harmony export */   Skeleton: () => (/* reexport safe */ _survey_react_ui_entries_react_ui_model__WEBPACK_IMPORTED_MODULE_1__.Skeleton),
+/* harmony export */   SliderLabelItem: () => (/* reexport safe */ _survey_react_ui_entries_react_ui_model__WEBPACK_IMPORTED_MODULE_1__.SliderLabelItem),
 /* harmony export */   StrictMode: () => (/* reexport safe */ react__WEBPACK_IMPORTED_MODULE_0__.StrictMode),
 /* harmony export */   Survey: () => (/* reexport safe */ _survey_react_ui_entries_react_ui_model__WEBPACK_IMPORTED_MODULE_1__.Survey),
 /* harmony export */   SurveyActionBar: () => (/* reexport safe */ _survey_react_ui_entries_react_ui_model__WEBPACK_IMPORTED_MODULE_1__.SurveyActionBar),
@@ -13713,7 +13785,7 @@ var preact = react__WEBPACK_IMPORTED_MODULE_0__;
 
 
 
-(0,survey_core__WEBPACK_IMPORTED_MODULE_2__.checkLibraryVersion)("".concat("2.1.1"), "survey-js-ui");
+(0,survey_core__WEBPACK_IMPORTED_MODULE_2__.checkLibraryVersion)("".concat("2.2.0"), "survey-js-ui");
 
 })();