survey-react-ui 2.0.9 → 2.1.0

package/fesm/survey-react-ui.mjs

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v2.0.9
+ * surveyjs - Survey JavaScript library v2.1.0
  * Copyright (c) 2015-2025 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -1473,7 +1473,7 @@ class SurveyQuestion extends SurveyElementBase {
         const singleInput = singleSummary || (question.singleInputQuestion ? this.renderSingleInputQuestion(question, cssClasses) : undefined);
         const questionContent = singleInput || this.wrapQuestionContent(this.renderQuestionContent());
         return (React.createElement(React.Fragment, null,
-            React.createElement("div", { ref: this.rootRef, id: question.id, className: question.getRootCss(), style: rootStyle, role: question.ariaRole, "aria-required": this.question.ariaRequired, "aria-invalid": this.question.ariaInvalid, "aria-label": this.question.ariaLabel, "aria-labelledby": question.ariaLabelledBy, "aria-describedby": question.ariaDescribedBy, "aria-expanded": question.ariaExpanded, "data-name": question.name },
+            React.createElement("div", { ref: this.rootRef, id: question.id, className: question.getRootCss(), style: rootStyle, "data-name": question.name, role: question.ariaRole, "aria-required": this.question.ariaRequired, "aria-invalid": this.question.ariaInvalid, "aria-label": this.question.ariaLabel, "aria-labelledby": question.ariaLabelledBy, "aria-describedby": question.ariaDescribedBy, "aria-expanded": question.ariaExpanded },
                 singleBreadcrumbs,
                 errorsAboveQuestion,
                 headerTop,
@@ -1925,7 +1925,7 @@ class PopupModal extends SurveyElementBase {
 PopupModal.modalDescriptors = [];
 
 /*!
- * surveyjs - Survey JavaScript library v2.0.9
+ * surveyjs - Survey JavaScript library v2.1.0
  * Copyright (c) 2015-2025 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -1995,7 +1995,7 @@ var iconsV1 = {
 };
 
 /*!
- * surveyjs - Survey JavaScript library v2.0.9
+ * surveyjs - Survey JavaScript library v2.1.0
  * Copyright (c) 2015-2025 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -2479,7 +2479,7 @@ class SurveyPanel extends SurveyPanelBase {
     }
     renderContent(style, rows, className) {
         const bottom = this.renderBottom();
-        return (React.createElement("div", { style: style, className: className, id: this.panel.contentId },
+        return (React.createElement("div", { style: style, className: className, id: this.panel.contentId, role: this.panel.ariaRole, "aria-labelledby": this.panel.ariaLabelledBy, "aria-label": this.panel.ariaLabel },
             rows,
             bottom));
     }
@@ -2744,6 +2744,9 @@ class SurveyQuestionCheckboxItem extends ReactSurveyElement {
     get hideCaption() {
         return this.props.hideCaption === true;
     }
+    get ariaLabel() {
+        return this.props.ariaLabel || null;
+    }
     componentDidUpdate(prevProps, prevState) {
         super.componentDidUpdate(prevProps, prevState);
         if (prevProps.item !== this.props.item && !this.question.isDesignMode) {
@@ -2780,7 +2783,7 @@ class SurveyQuestionCheckboxItem extends ReactSurveyElement {
         const itemLabel = !this.hideCaption ? React.createElement("span", { className: this.cssClasses.controlLabel }, this.renderLocString(this.item.locText, this.textStyle)) : null;
         return (React.createElement("div", { className: itemClass, role: "presentation", ref: this.rootRef },
             React.createElement("label", { className: labelClass },
-                React.createElement("input", { className: this.cssClasses.itemControl, type: "checkbox", name: this.question.name + this.item.id, value: this.item.value, id: id, style: this.inputStyle, disabled: !this.question.getItemEnabled(this.item), readOnly: this.question.isReadOnlyAttr, checked: isChecked, onChange: this.handleOnChange, required: this.question.hasRequiredError() }),
+                React.createElement("input", { className: this.cssClasses.itemControl, type: "checkbox", name: this.question.name + this.item.id, value: this.item.value, id: id, style: this.inputStyle, disabled: !this.question.getItemEnabled(this.item), readOnly: this.question.isReadOnlyAttr, checked: isChecked, onChange: this.handleOnChange, required: this.question.hasRequiredError(), "aria-label": this.ariaLabel }),
                 this.cssClasses.materialDecorator ?
                     React.createElement("span", { className: this.cssClasses.materialDecorator }, this.question.itemSvgIcon ?
                         React.createElement("svg", { className: this.cssClasses.itemDecorator },
@@ -3083,7 +3086,7 @@ class TagboxFilterString extends SurveyElementBase {
                     (React.createElement("div", { className: this.question.cssClasses.hintSuffix },
                         React.createElement("span", { style: { visibility: "hidden" }, "data-bind": "text: model.filterString" }, this.model.inputStringRendered),
                         React.createElement("span", null, this.model.hintStringSuffix))) : null,
-                React.createElement("input", { type: "text", autoComplete: "off", id: this.question.getInputId(), inputMode: this.model.inputMode, ref: (element) => (this.inputElement = element), className: this.question.cssClasses.filterStringInput, disabled: this.question.isInputReadOnly, readOnly: this.model.filterReadOnly ? true : undefined, size: !this.model.inputStringRendered ? 1 : undefined, role: this.model.filterStringEnabled ? this.question.ariaRole : undefined, "aria-expanded": this.question.ariaExpanded, "aria-label": this.question.a11y_input_ariaLabel, "aria-labelledby": this.question.a11y_input_ariaLabelledBy, "aria-describedby": this.question.a11y_input_ariaDescribedBy, "aria-controls": this.model.listElementId, "aria-activedescendant": this.model.ariaActivedescendant, placeholder: this.model.filterStringPlaceholder, onKeyDown: (e) => { this.keyhandler(e); }, onChange: (e) => { this.onChange(e); }, onBlur: (e) => { this.onBlur(e); }, onFocus: (e) => { this.onFocus(e); } }))));
+                React.createElement("input", { type: "text", autoComplete: "off", id: this.question.getInputId(), inputMode: this.model.inputMode, ref: (element) => (this.inputElement = element), className: this.question.cssClasses.filterStringInput, disabled: this.question.isInputReadOnly, readOnly: this.model.filterReadOnly ? true : undefined, size: !this.model.inputStringRendered ? 1 : undefined, role: this.model.ariaInputRole, "aria-required": this.model.ariaInputRequired, "aria-invalid": this.model.ariaInputInvalid, "aria-errormessage": this.model.ariaInputErrorMessage, "aria-expanded": this.model.ariaInputExpanded, "aria-label": this.model.ariaInputLabel, "aria-labelledby": this.model.ariaInputLabelledby, "aria-describedby": this.model.ariaInputDescribedby, "aria-controls": this.model.ariaInputControls, "aria-activedescendant": this.model.ariaInputActivedescendant, placeholder: this.model.filterStringPlaceholder, onKeyDown: (e) => { this.keyhandler(e); }, onChange: (e) => { this.onChange(e); }, onBlur: (e) => { this.onBlur(e); }, onFocus: (e) => { this.onFocus(e); } }))));
     }
 }
 ReactQuestionFactory.Instance.registerQuestion("sv-tagbox-filter", (props) => {
@@ -3177,17 +3180,17 @@ class SurveyQuestionDropdownBase extends SurveyQuestionUncontrolledElement {
         }
     }
     renderSelect(cssClasses) {
-        var _a, _b;
         let selectElement = null;
+        const dropdownListModel = this.question.dropdownListModel;
         if (this.question.isReadOnly) {
             // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore
-            selectElement = React.createElement("div", { id: this.question.inputId, "aria-label": this.question.a11y_input_ariaLabel, "aria-labelledby": this.question.a11y_input_ariaLabelledBy, "aria-describedby": this.question.a11y_input_ariaDescribedBy, tabIndex: this.question.isDisabledAttr ? undefined : 0, className: this.question.getControlClass(), ref: (div) => (this.setControl(div)) }, this.renderReadOnlyElement());
+            selectElement = React.createElement("div", { id: this.question.inputId, role: dropdownListModel === null || dropdownListModel === void 0 ? void 0 : dropdownListModel.ariaQuestionRole, "aria-label": dropdownListModel === null || dropdownListModel === void 0 ? void 0 : dropdownListModel.ariaQuestionLabel, "aria-labelledby": dropdownListModel === null || dropdownListModel === void 0 ? void 0 : dropdownListModel.ariaQuestionLabelledby, "aria-describedby": dropdownListModel === null || dropdownListModel === void 0 ? void 0 : dropdownListModel.ariaQuestionDescribedby, "aria-expanded": "false", "aria-readonly": "true", "aria-disabled": "true", tabIndex: this.question.isDisabledAttr ? undefined : 0, className: this.question.getControlClass(), ref: (div) => (this.setControl(div)) }, this.renderReadOnlyElement());
         }
         else {
             selectElement = React.createElement(React.Fragment, null,
-                this.renderInput(this.question["dropdownListModel"]),
-                React.createElement(Popup, { model: (_b = (_a = this.question) === null || _a === void 0 ? void 0 : _a.dropdownListModel) === null || _b === void 0 ? void 0 : _b.popupModel }));
+                this.renderInput(dropdownListModel),
+                React.createElement(Popup, { model: dropdownListModel.popupModel }));
         }
         return (React.createElement("div", { className: cssClasses.selectWrapper, onClick: this.click },
             selectElement,
@@ -3213,7 +3216,7 @@ class SurveyQuestionDropdownBase extends SurveyQuestionUncontrolledElement {
         return (React.createElement("div", { id: this.question.inputId, className: this.question.getControlClass(), tabIndex: dropdownListModel.noTabIndex ? undefined : 0, 
             // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore
-            disabled: this.question.isDisabledAttr, required: this.question.isRequired, onKeyDown: this.keyhandler, onBlur: this.blur, onFocus: this.focus, role: this.question.ariaRole, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-labelledby": this.question.ariaLabelledBy, "aria-invalid": this.question.ariaInvalid, "aria-errormessage": this.question.ariaErrormessage, "aria-expanded": this.question.ariaExpanded, "aria-controls": dropdownListModel.listElementId, "aria-activedescendant": dropdownListModel.ariaActivedescendant, ref: (div) => (this.setControl(div)) },
+            disabled: this.question.isDisabledAttr, required: this.question.isRequired, onKeyDown: this.keyhandler, onBlur: this.blur, onFocus: this.focus, role: dropdownListModel.ariaQuestionRole, "aria-required": dropdownListModel.ariaQuestionRequired, "aria-invalid": dropdownListModel.ariaQuestionInvalid, "aria-errormessage": dropdownListModel.ariaQuestionErrorMessage, "aria-expanded": dropdownListModel.ariaQuestionExpanded, "aria-label": dropdownListModel.ariaQuestionLabel, "aria-labelledby": dropdownListModel.ariaQuestionLabelledby, "aria-describedby": dropdownListModel.ariaQuestionDescribedby, "aria-controls": dropdownListModel.ariaQuestionControls, "aria-activedescendant": dropdownListModel.ariaQuestionActivedescendant, ref: (div) => (this.setControl(div)) },
             dropdownListModel.showHintPrefix ?
                 (React.createElement("div", { className: this.question.cssClasses.hintPrefix },
                     React.createElement("span", null, dropdownListModel.hintStringPrefix))) : null,
@@ -3223,7 +3226,7 @@ class SurveyQuestionDropdownBase extends SurveyQuestionUncontrolledElement {
                         React.createElement("span", { style: { visibility: "hidden" }, "data-bind": "text: model.filterString" }, dropdownListModel.inputStringRendered),
                         React.createElement("span", null, dropdownListModel.hintStringSuffix))) : null,
                 valueElement,
-                React.createElement("input", { type: "text", autoComplete: "off", id: this.question.getInputId(), ref: (element) => (this.inputElement = element), className: this.question.cssClasses.filterStringInput, role: dropdownListModel.filterStringEnabled ? this.question.ariaRole : undefined, "aria-expanded": this.question.ariaExpanded, "aria-label": this.question.a11y_input_ariaLabel, "aria-labelledby": this.question.a11y_input_ariaLabelledBy, "aria-describedby": this.question.a11y_input_ariaDescribedBy, "aria-controls": dropdownListModel.listElementId, "aria-activedescendant": dropdownListModel.ariaActivedescendant, placeholder: dropdownListModel.placeholderRendered, readOnly: dropdownListModel.filterReadOnly ? true : undefined, tabIndex: dropdownListModel.noTabIndex ? undefined : -1, disabled: this.question.isDisabledAttr, inputMode: dropdownListModel.inputMode, onChange: (e) => { onInputChange(e); }, onBlur: this.blur, onFocus: this.focus })),
+                React.createElement("input", { type: "text", autoComplete: "off", id: this.question.getInputId(), ref: (element) => (this.inputElement = element), className: this.question.cssClasses.filterStringInput, role: dropdownListModel.ariaInputRole, "aria-required": dropdownListModel.ariaInputRequired, "aria-invalid": dropdownListModel.ariaInputInvalid, "aria-errormessage": dropdownListModel.ariaInputErrorMessage, "aria-expanded": dropdownListModel.ariaInputExpanded, "aria-label": dropdownListModel.ariaInputLabel, "aria-labelledby": dropdownListModel.ariaInputLabelledby, "aria-describedby": dropdownListModel.ariaInputDescribedby, "aria-controls": dropdownListModel.ariaInputControls, "aria-activedescendant": dropdownListModel.ariaInputActivedescendant, placeholder: dropdownListModel.placeholderRendered, readOnly: dropdownListModel.filterReadOnly ? true : undefined, tabIndex: dropdownListModel.noTabIndex ? undefined : -1, disabled: this.question.isDisabledAttr, inputMode: dropdownListModel.inputMode, onChange: (e) => { onInputChange(e); }, onBlur: this.blur, onFocus: this.focus })),
             this.createClearButton()));
     }
     createClearButton() {
@@ -3324,7 +3327,7 @@ class SurveyQuestionTagbox extends SurveyQuestionDropdownBase {
         return (React.createElement("div", { id: this.question.inputId, className: this.question.getControlClass(), tabIndex: dropdownListModel.noTabIndex ? undefined : 0, 
             // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore
-            disabled: this.question.isInputReadOnly, required: this.question.isRequired, onKeyDown: this.keyhandler, onBlur: this.blur, role: this.question.ariaRole, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-errormessage": this.question.ariaErrormessage, "aria-expanded": this.question.ariaExpanded, "aria-controls": dropdownListModel.listElementId, "aria-activedescendant": dropdownListModel.ariaActivedescendant, ref: (div) => (this.setControl(div)) },
+            disabled: this.question.isInputReadOnly, required: this.question.isRequired, onKeyDown: this.keyhandler, onBlur: this.blur, role: dropdownListModel.ariaQuestionRole, "aria-required": dropdownListModel.ariaQuestionRequired, "aria-invalid": dropdownListModel.ariaQuestionInvalid, "aria-errormessage": dropdownListModel.ariaQuestionErrorMessage, "aria-label": dropdownListModel.ariaQuestionLabel, "aria-labelledby": dropdownListModel.ariaQuestionLabelledby, "aria-describedby": dropdownListModel.ariaQuestionDescribedby, "aria-expanded": dropdownListModel.ariaQuestionExpanded, "aria-controls": dropdownListModel.ariaQuestionControls, "aria-activedescendant": dropdownListModel.ariaQuestionActivedescendant, ref: (div) => (this.setControl(div)) },
             React.createElement("div", { className: this.question.cssClasses.controlValue },
                 items,
                 React.createElement(TagboxFilterString, { model: dropdownMultiSelectListModel, question: this.question })),
@@ -3366,7 +3369,7 @@ class SurveyQuestionDropdownSelect extends SurveyQuestionDropdown {
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
         React.createElement("div", { id: this.question.inputId, className: this.question.getControlClass(), disabled: true }, this.question.readOnlyText)) :
-            (React.createElement("select", { id: this.question.inputId, className: this.question.getControlClass(), ref: (select) => (this.setControl(select)), autoComplete: this.question.autocomplete, onChange: this.updateValueOnEvent, onInput: this.updateValueOnEvent, onClick: click, onKeyUp: keyup, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-errormessage": this.question.ariaErrormessage, required: this.question.isRequired },
+            (React.createElement("select", { id: this.question.inputId, className: this.question.getControlClass(), ref: (select) => (this.setControl(select)), autoComplete: this.question.autocomplete, onChange: this.updateValueOnEvent, onInput: this.updateValueOnEvent, onClick: click, onKeyUp: keyup, "aria-required": this.question.a11y_input_ariaRequired, "aria-label": this.question.a11y_input_ariaLabel, "aria-invalid": this.question.a11y_input_ariaInvalid, "aria-errormessage": this.question.a11y_input_ariaErrormessage, required: this.question.isRequired },
                 this.question.allowClear ? (React.createElement("option", { value: "" }, this.question.placeholder)) : null,
                 this.question.visibleChoices.map((item, i) => React.createElement(SurveyQuestionOptionItem, { key: "item" + i, item: item }))));
         return (React.createElement("div", { className: cssClasses.selectWrapper },
@@ -3943,6 +3946,9 @@ class SurveyQuestionRadioItem extends ReactSurveyElement {
     get hideCaption() {
         return this.props.hideCaption === true;
     }
+    get ariaLabel() {
+        return this.props.ariaLabel || null;
+    }
     shouldComponentUpdate(nextProps, nextState) {
         if (!super.shouldComponentUpdate(nextProps, nextState))
             return false;
@@ -3980,7 +3986,7 @@ class SurveyQuestionRadioItem extends ReactSurveyElement {
         const itemLabel = !this.hideCaption ? React.createElement("span", { className: controlLabelClass }, this.renderLocString(this.item.locText, this.textStyle)) : null;
         return (React.createElement("div", { className: itemClass, role: "presentation", ref: this.rootRef },
             React.createElement("label", { onMouseDown: this.handleOnMouseDown, className: labelClass },
-                React.createElement("input", { "aria-errormessage": this.question.ariaErrormessage, className: this.cssClasses.itemControl, id: this.question.getItemId(this.item), type: "radio", name: this.question.questionName, checked: this.isChecked, value: this.item.value, disabled: !this.question.getItemEnabled(this.item), readOnly: this.question.isReadOnlyAttr, onChange: this.handleOnChange }),
+                React.createElement("input", { "aria-errormessage": this.question.ariaErrormessage, className: this.cssClasses.itemControl, id: this.question.getItemId(this.item), type: "radio", name: this.question.questionName, checked: this.isChecked, value: this.item.value, disabled: !this.question.getItemEnabled(this.item), readOnly: this.question.isReadOnlyAttr, onChange: this.handleOnChange, "aria-label": this.ariaLabel }),
                 this.cssClasses.materialDecorator ?
                     React.createElement("span", { className: this.cssClasses.materialDecorator }, this.question.itemSvgIcon ?
                         React.createElement("svg", { className: this.cssClasses.itemDecorator },
@@ -4601,11 +4607,14 @@ class SurveyQuestionMatrixDropdownCell extends SurveyQuestionAndErrorsCell {
     }
     renderCellCheckboxButton() {
         var key = this.cell.question.id + "item" + this.cell.choiceIndex;
-        return (React.createElement(SurveyQuestionCheckboxItem, { key: key, question: this.cell.question, cssClasses: this.cell.question.cssClasses, isDisplayMode: this.cell.question.isInputReadOnly, item: this.cell.item, isFirst: this.cell.isFirstChoice, index: this.cell.choiceIndex.toString(), hideCaption: true }));
+        return (React.createElement(SurveyQuestionCheckboxItem, { key: key, question: this.cell.question, cssClasses: this.cell.question.cssClasses, isDisplayMode: this.cell.question.isInputReadOnly, item: this.cell.item, isFirst: this.cell.isFirstChoice, index: this.cell.choiceIndex.toString(), hideCaption: true, ariaLabel: this.getCellAriaLabel() }));
     }
     renderCellRadiogroupButton() {
         var key = this.cell.question.id + "item" + this.cell.choiceIndex;
-        return (React.createElement(SurveyQuestionRadioItem, { key: key, question: this.cell.question, cssClasses: this.cell.question.cssClasses, isDisplayMode: this.cell.question.isInputReadOnly, item: this.cell.item, index: this.cell.choiceIndex.toString(), isChecked: this.cell.question.value === this.cell.item.value, isDisabled: this.cell.question.isReadOnly || !this.cell.item.isEnabled, hideCaption: true }));
+        return (React.createElement(SurveyQuestionRadioItem, { key: key, question: this.cell.question, cssClasses: this.cell.question.cssClasses, isDisplayMode: this.cell.question.isInputReadOnly, item: this.cell.item, index: this.cell.choiceIndex.toString(), isChecked: this.cell.question.value === this.cell.item.value, isDisabled: this.cell.question.isReadOnly || !this.cell.item.isEnabled, hideCaption: true, ariaLabel: this.getCellAriaLabel() }));
+    }
+    getCellAriaLabel() {
+        return this.question.parentQuestion.getCellAriaLabel(this.cell.row.locText.renderedHtml, this.cell.column.locTitle.renderedHtml);
     }
 }
 
@@ -5051,7 +5060,7 @@ class List extends SurveyElementBase {
             return null;
         const items = this.renderItems();
         const ulStyle = { display: this.model.isEmpty ? "none" : null };
-        return (React.createElement("ul", { className: this.model.getListClass(), style: ulStyle, role: this.model.listRole, "aria-label": this.model.a11yInputAriaLabel, id: this.model.elementId, onMouseDown: (e) => {
+        return (React.createElement("ul", { className: this.model.getListClass(), style: ulStyle, role: this.model.listRole, "aria-label": this.model.a11ya11y_input_ariaLabel, id: this.model.elementId, onMouseDown: (e) => {
                 e.preventDefault();
             }, onKeyDown: this.handleKeydown, onMouseMove: this.handleMouseMove }, items));
     }
@@ -5182,6 +5191,91 @@ ReactQuestionFactory.Instance.registerQuestion("sv-rating-dropdown", (props) =>
 });
 RendererFactory.Instance.registerRenderer("rating", "dropdown", "sv-rating-dropdown");
 
+class SurveyQuestionSlider extends SurveyQuestionElementBase {
+    constructor(props) {
+        super(props);
+        this.rangeInputRef = React.createRef();
+    }
+    componentDidMount() {
+        super.componentDidMount();
+        this.question.refreshInputRange(this.rangeInputRef.current);
+    }
+    get question() {
+        return this.questionBase;
+    }
+    getStateElement() {
+        return this.question;
+    }
+    renderElement() {
+        const { cssClasses, showLabels, sliderType, getTrackPercentLeft, getTrackPercentRight, allowDragRange, setValueByClickOnPath } = this.question;
+        const rangeInput = (sliderType === "single" && allowDragRange) ? null : this.getRangeInput();
+        const thumbsAndInputs = this.getInputsAndThumbs();
+        const labels = showLabels ? this.getLabels() : null;
+        return (React.createElement("div", { className: this.question.rootCss, ref: (div) => (this.setControl(div)) },
+            rangeInput,
+            React.createElement("div", { className: cssClasses.visualContainer, onPointerUp: (e) => { setValueByClickOnPath(e.nativeEvent, this.control); } },
+                React.createElement("div", { className: cssClasses.visualContainerSlider },
+                    React.createElement("div", { className: cssClasses.inverseTrackLeft, style: { width: getTrackPercentLeft() + "%" } }),
+                    React.createElement("div", { className: cssClasses.inverseTrackRight, style: { width: getTrackPercentRight() + "%" } }),
+                    React.createElement("div", { className: cssClasses.rangeTrack, style: { left: getTrackPercentLeft() + "%", right: getTrackPercentRight() + "%" } }),
+                    thumbsAndInputs)),
+            labels));
+    }
+    getInputsAndThumbs() {
+        const inputsAndThumbs = [];
+        const value = this.question.getRenderedValue();
+        for (let i = 0; i < value.length; i++) {
+            const thumbAndInput = React.createElement(React.Fragment, { key: i },
+                this.getInput(i),
+                this.getThumb(i));
+            inputsAndThumbs.push(thumbAndInput);
+        }
+        return inputsAndThumbs;
+    }
+    getThumb(i) {
+        const { cssClasses, getThumbContainerCss, tooltipVisibility, tooltipCss, getPercent, getRenderedValue, getTooltipValue } = this.question;
+        const value = getRenderedValue()[i];
+        let tooltip = null;
+        if (tooltipVisibility !== "never") {
+            tooltip = React.createElement("div", { className: tooltipCss },
+                React.createElement("div", { className: cssClasses.tooltipPanel },
+                    React.createElement("div", { className: cssClasses.tooltipValue }, getTooltipValue(i))));
+        }
+        const thumb = React.createElement("div", { className: getThumbContainerCss(i), style: { left: getPercent(value) + "%" } },
+            tooltip,
+            React.createElement("div", { className: cssClasses.thumb },
+                React.createElement("div", { className: cssClasses.thumbDot })));
+        return thumb;
+    }
+    getInput(i) {
+        const { renderedMax: max, renderedMin: min, step, cssClasses, isDisabledAttr, getRenderedValue, handleOnChange, handlePointerDown, handlePointerUp, handleKeyDown, handleKeyUp, handleOnFocus, handleOnBlur } = this.question;
+        const value = getRenderedValue()[i];
+        const input = React.createElement("input", { className: cssClasses.input, id: "sjs-slider-input-" + i, type: "range", min: min, max: max, step: step, value: value, onChange: (e) => { handleOnChange(e.nativeEvent, i); }, onPointerDown: (e) => { handlePointerDown(e.nativeEvent); }, onPointerUp: (e) => { e.stopPropagation(); handlePointerUp(e.nativeEvent); }, onKeyDown: (e) => { handleKeyDown(e.nativeEvent); }, onKeyUp: (e) => { handleKeyUp(e.nativeEvent); }, onFocus: () => { handleOnFocus(i); }, onBlur: () => { 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;
+    }
+    getRangeInput() {
+        const { renderedMax: max, renderedMin: min, step, cssClasses, handleRangeOnChange, handleRangePointerDown, handleRangePointerUp } = this.question;
+        return React.createElement("input", { name: "range-input", ref: this.rangeInputRef, className: cssClasses.input, type: "range", "aria-hidden": "true", min: min, max: max, step: step, tabIndex: -1, onChange: (e) => { handleRangeOnChange(e.nativeEvent); }, onPointerDown: (e) => { e.persist(); handleRangePointerDown(e.nativeEvent, this.control); }, onPointerUp: (e) => { handleRangePointerUp(e.nativeEvent, this.control); } });
+    }
+    getLabels() {
+        const labels = [];
+        const { renderedLabels, cssClasses, handleLabelPointerUp, getLabelCss } = this.question;
+        for (let i = 0; i < renderedLabels.length; i++) {
+            const value = renderedLabels[i].value;
+            const text = renderedLabels[i].locText;
+            const label = React.createElement("div", { key: i, className: getLabelCss(i), style: { left: value + "%" }, onPointerUp: (e) => { handleLabelPointerUp(e.nativeEvent, i); } },
+                React.createElement("div", { className: cssClasses.labelTick }),
+                React.createElement("div", { className: cssClasses.labelText }, this.renderLocString(text)));
+            labels.push(label);
+        }
+        return React.createElement("div", { className: cssClasses.labelsContainer },
+            React.createElement("div", null, labels));
+    }
+}
+ReactQuestionFactory.Instance.registerQuestion("slider", (props) => {
+    return React.createElement(SurveyQuestionSlider, props);
+});
+
 class SurveyQuestionExpression extends SurveyQuestionElementBase {
     constructor(props) {
         super(props);
@@ -6085,7 +6179,7 @@ ReactElementFactory.Instance.registerElement(LocalizableString.editableRenderer,
     return React.createElement(SurveyLocStringEditor, props);
 });
 
-checkLibraryVersion(`${"2.0.9"}`, "survey-react-ui");
+checkLibraryVersion(`${"2.1.0"}`, "survey-react-ui");
 
-export { CharacterCounterComponent, ComponentsContainer, Header, HeaderCell, HeaderMobile, List, ListItemContent, ListItemGroup, LoadingIndicatorComponent, LogoImage, MatrixRow, NotifierComponent, Popup, PopupModal, PopupSurvey, QuestionErrorComponent, RatingDropdownItem, RatingItem, RatingItemSmiley, RatingItemStar, ReactElementFactory, ReactQuestionFactory, ReactSurveyElement, ReactSurveyElementsWrapper, Scroll, Skeleton, Survey, SurveyActionBar, SurveyElementBase, SurveyElementErrors, SurveyFileChooseButton, SurveyFilePreview, SurveyFlowPanel, SurveyHeader, SurveyLocStringEditor, SurveyLocStringViewer, SurveyNavigationBase, SurveyNavigationButton, SurveyPage, SurveyPanel, SurveyProgress, SurveyProgressButtons, SurveyProgressToc, SurveyQuestion, SurveyQuestionAndErrorsCell, SurveyQuestionBoolean, SurveyQuestionBooleanCheckbox, SurveyQuestionBooleanRadio, SurveyQuestionButtonGroup, SurveyQuestionButtonGroupDropdown, SurveyQuestionCheckbox, SurveyQuestionCheckboxItem, SurveyQuestionComment, SurveyQuestionCommentItem, SurveyQuestionComposite, SurveyQuestionCustom, SurveyQuestionDropdown, SurveyQuestionDropdownBase, SurveyQuestionDropdownSelect, SurveyQuestionElementBase, SurveyQuestionEmpty, SurveyQuestionExpression, SurveyQuestionFile, SurveyQuestionHtml, SurveyQuestionImage, SurveyQuestionImagePicker, SurveyQuestionMatrix, SurveyQuestionMatrixCell, SurveyQuestionMatrixDetailButton, SurveyQuestionMatrixDropdown, SurveyQuestionMatrixDropdownBase, SurveyQuestionMatrixDropdownCell, SurveyQuestionMatrixDynamic, SurveyQuestionMatrixDynamicAddButton, SurveyQuestionMatrixDynamicDragDropIcon, SurveyQuestionMatrixDynamicRemoveButton, SurveyQuestionMatrixRow, SurveyQuestionMultipleText, SurveyQuestionOptionItem, SurveyQuestionPanelDynamic, SurveyQuestionPanelDynamicAddButton, SurveyQuestionPanelDynamicNextButton, SurveyQuestionPanelDynamicPrevButton, SurveyQuestionPanelDynamicProgressText, SurveyQuestionPanelDynamicRemoveButton, SurveyQuestionRadioItem, SurveyQuestionRadiogroup, SurveyQuestionRanking, SurveyQuestionRankingItem, SurveyQuestionRankingItemContent, SurveyQuestionRating, SurveyQuestionRatingDropdown, SurveyQuestionSignaturePad, SurveyQuestionTagbox, SurveyQuestionTagboxItem, SurveyQuestionText, SurveyRow, SurveyTimerPanel, SurveyWindow, SvgBundleComponent, SvgIcon, TagboxFilterString, TitleActions, TitleElement, attachKey2click };
+export { CharacterCounterComponent, ComponentsContainer, Header, HeaderCell, HeaderMobile, List, ListItemContent, ListItemGroup, LoadingIndicatorComponent, LogoImage, MatrixRow, NotifierComponent, Popup, PopupModal, PopupSurvey, QuestionErrorComponent, RatingDropdownItem, RatingItem, RatingItemSmiley, RatingItemStar, ReactElementFactory, ReactQuestionFactory, ReactSurveyElement, ReactSurveyElementsWrapper, Scroll, Skeleton, Survey, SurveyActionBar, SurveyElementBase, SurveyElementErrors, SurveyFileChooseButton, SurveyFilePreview, SurveyFlowPanel, SurveyHeader, SurveyLocStringEditor, SurveyLocStringViewer, SurveyNavigationBase, SurveyNavigationButton, SurveyPage, SurveyPanel, SurveyProgress, SurveyProgressButtons, SurveyProgressToc, SurveyQuestion, SurveyQuestionAndErrorsCell, SurveyQuestionBoolean, SurveyQuestionBooleanCheckbox, SurveyQuestionBooleanRadio, SurveyQuestionButtonGroup, SurveyQuestionButtonGroupDropdown, SurveyQuestionCheckbox, SurveyQuestionCheckboxItem, SurveyQuestionComment, SurveyQuestionCommentItem, SurveyQuestionComposite, SurveyQuestionCustom, SurveyQuestionDropdown, SurveyQuestionDropdownBase, SurveyQuestionDropdownSelect, SurveyQuestionElementBase, SurveyQuestionEmpty, SurveyQuestionExpression, SurveyQuestionFile, SurveyQuestionHtml, SurveyQuestionImage, SurveyQuestionImagePicker, SurveyQuestionMatrix, SurveyQuestionMatrixCell, SurveyQuestionMatrixDetailButton, SurveyQuestionMatrixDropdown, SurveyQuestionMatrixDropdownBase, SurveyQuestionMatrixDropdownCell, SurveyQuestionMatrixDynamic, SurveyQuestionMatrixDynamicAddButton, SurveyQuestionMatrixDynamicDragDropIcon, SurveyQuestionMatrixDynamicRemoveButton, SurveyQuestionMatrixRow, SurveyQuestionMultipleText, SurveyQuestionOptionItem, SurveyQuestionPanelDynamic, SurveyQuestionPanelDynamicAddButton, SurveyQuestionPanelDynamicNextButton, SurveyQuestionPanelDynamicPrevButton, SurveyQuestionPanelDynamicProgressText, SurveyQuestionPanelDynamicRemoveButton, SurveyQuestionRadioItem, SurveyQuestionRadiogroup, SurveyQuestionRanking, SurveyQuestionRankingItem, SurveyQuestionRankingItemContent, SurveyQuestionRating, SurveyQuestionRatingDropdown, SurveyQuestionSignaturePad, SurveyQuestionSlider, SurveyQuestionTagbox, SurveyQuestionTagboxItem, SurveyQuestionText, SurveyRow, SurveyTimerPanel, SurveyWindow, SvgBundleComponent, SvgIcon, TagboxFilterString, TitleActions, TitleElement, attachKey2click };
 //# sourceMappingURL=survey-react-ui.mjs.map