我使用 noUiSlider.js ( slider 库)作为在 SurveyJS (另一个库)中可用的“自定义小部件”。 SurveyJS 关于与 noUiSlider.js 集成的文档位于:https://surveyjs.io/Examples/Library/?id=custom-widget-nouislider&platform=Reactjs&theme=modern#content-js
但是,我还想使用 noUiSlider 的其他属性(除了 SurveyJS 文档中提到的属性),例如指定 slider 的最小值和最大值的“范围”(您可以在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。)
目前的外观如下: /image/h2tcb.jpg
所以我的问题是我不知道 SurveyJS 如何期望我传递这些范围值。如果有人处理过这个问题或者有想法解决我的问题,我将不胜感激。
最佳答案
如果您检查小部件源代码 - https://github.com/surveyjs/custom-widgets/blob/master/src/nouislider.js#L82-L115
您可以看到,您可以设置问题的 rangeMin
和 rangeMax
属性。开始是问题的默认值。
这是工作中的 plunker 示例 - https://plnkr.co/edit/zROpEHkkUutHtaU8
JSON:
{
"type": "nouislider",
"name": "range",
"title": "Please range",
"rangeMin": 55,
"rangeMax": 78,
"defaultValue": 66
}
关于javascript - 在 ReactJS 项目中将 noUiSlider.js 与 SurveyJS 集成,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64233237/