Search code examples
javascriptreactjsnouislidersurveyjs

Integrating noUiSlider.js with SurveyJS in a ReactJS project

I am using noUiSlider.js (a slider library) as a 'custom widget' that is available within surveyJS (another library). The documentation at surveyJS about the integration with noUiSlider.js is here: https://surveyjs.io/Examples/Library/?id=custom-widget-nouislider&platform=Reactjs&theme=modern#content-js

However, I would also like to use other properties of the noUiSlider (other than the ones mentioned in the surveyJS documentation), such as 'range' which specifies the minimum and maximum values of the slider (you can see it in the noUiSlider documentation here: https://refreshless.com/nouislider/slider-values/ ).

Due to the way surveyJS works, I figured I should initialize everything regarding noUiSlider within the survey JSON. Here is the relevant code:

//...

{
"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}}`

            }
        ]
      },

//...

In the above, 'orientation' and 'step' worked, whereas 'range' and 'start' are not working. (I've tried all possible string combinations in the value of 'range', including the one above, and nothing has worked. I keep having the default values, 1 -> 100, displayed.)

Here is how it currently looks: https://i.sstatic.net/h2tcb.jpg

So my problem is that I don't know how surveyJS is expecting me to pass those range values. If anyone has worked with this or has an idea to solve my problem, I would appreciate any input.

Solution

  • If you check the widget source code - https://github.com/surveyjs/custom-widgets/blob/master/src/nouislider.js#L82-L115

    You can see that you can set the rangeMin and rangeMax properties of a question. The start is the question's default value.

    Here is the working plunker sample - https://plnkr.co/edit/zROpEHkkUutHtaU8

    The JSON:

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