在 ReactJS 项目中将 noUiSlider.js 与 SurveyJS 集成
Integrating noUiSlider.js with SurveyJS in a ReactJS project
我正在使用 noUiSlider.js(滑块库)作为 surveyJS(另一个库)中可用的 'custom widget'。 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 的工作方式,我想我应该在调查中初始化所有关于 noUiSlider 的东西 JSON。这是相关代码:
//...
{
"elements": [
{
"type": "nouislider",
"name": "slider",
"title": "Please select your revenue",
isRequired: true,
"orientation": 'vertical',
'step': 25, //min step
'start': 75,
'range': `{'min': [=11=], 'max': ${3000}}`
}
]
},
//...
在上面,'orientation' 和 'step' 有效,而 'range' 和 'start' 无效。 (我已经尝试了 'range' 值中所有可能的字符串组合,包括上面的组合,但没有任何效果。我一直显示默认值 1 -> 100。)
这是目前的样子:
https://imgur.com/a/My7hXEr
所以我的问题是我不知道 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
}
我正在使用 noUiSlider.js(滑块库)作为 surveyJS(另一个库)中可用的 'custom widget'。 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 的工作方式,我想我应该在调查中初始化所有关于 noUiSlider 的东西 JSON。这是相关代码:
//...
{
"elements": [
{
"type": "nouislider",
"name": "slider",
"title": "Please select your revenue",
isRequired: true,
"orientation": 'vertical',
'step': 25, //min step
'start': 75,
'range': `{'min': [=11=], 'max': ${3000}}`
}
]
},
//...
在上面,'orientation' 和 'step' 有效,而 'range' 和 'start' 无效。 (我已经尝试了 'range' 值中所有可能的字符串组合,包括上面的组合,但没有任何效果。我一直显示默认值 1 -> 100。)
这是目前的样子: https://imgur.com/a/My7hXEr
所以我的问题是我不知道 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
}