在ReactJS项目中集成noUiSlider.js和SurveyJS

Question

我使用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希望我如何传递这些范围值。如果任何人已经与此合作或有一个想法来解决我的问题，我将感谢任何意见。

Answer 1

如果您查看小部件源代码- 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
        }