在ReactJS项目中将noUiSlider.js与SurveyJS集成

如何解决在ReactJS项目中将noUiSlider.js与SurveyJS集成

我正在使用noUiSlider.js（滑块库）作为SurveyJS（另一个库）中提供的“自定义小部件”。 SurveyJS上有关与noUiSlider.js集成的文档位于：https://surveyjs.io/Examples/Library/?id=custom-widget-nouislider&platform=Reactjs&theme=modern#content-js

但是，我还想使用noUiSlider的其他属性（而不是SurveyJS文档中提到的属性），例如“ range”，它指定滑块的最小值和最大值（您可以在noUiSlider文档在这里：https://refreshless.com/nouislider/slider-values/）。

由于SurveyJS的工作方式，我认为我应该在调查JSON中初始化有关noUiSlider的所有内容。这是相关的代码：

//...

{
"elements": [
            {
"type": "nouiSlider","name": "slider","title": "Please select your revenue",isrequired: true,"orientation": 'vertical','step': 25,//min step
'start': 75,'range': `{'min': ${0},'max': ${3000}}`

            }
        ]
      },//...

在上面，“方向”和“步骤”有效，而“范围”和“开始”无效。（我已经尝试了'range'值中所有可能的字符串组合，包括上面的一种，但没有任何效果。我一直显示默认值1-> 100。）

这是当前的外观： https://imgur.com/a/My7hXEr

所以我的问题是我不知道SurveyJS如何期望我传递这些范围值。如果有人为此工作或有解决我的问题的想法，我将不胜感激。

解决方法

如果您检查小部件的源代码-https://github.com/surveyjs/custom-widgets/blob/master/src/nouislider.js#L82-L115

您会看到可以设置问题的rangeMin和rangeMax属性。开始是问题的默认值。

这是工作中的采样器示例-https://plnkr.co/edit/zROpEHkkUutHtaU8

JSON：

        {
            "type": "nouislider","name": "range","title": "Please range","rangeMin": 55,"rangeMax": 78,"defaultValue": 66
        }