0

Am using ReactJS with surveyjs, I want to use an input element for a percentage value (%). I wonder if there is a way of doing this:

  • Using bootsrap addon or something like that with surveyjs inputs.
  • Limit input value between 0 and 100.

Thank you.

AWIXOR
  • 406
  • 4
  • 15

1 Answers1

1

You could configure a question of type "text" to accept only numbers between 0 and 100. There are two options on the question that need to be set:

  1. Add a validator of type "numeric" with minimum value of 0 and a maximum of 100.
  2. Set the input type to "number" and set its min and max values to 0 and 100 respectively.

The resulting JSON should look like this:

{
 "pages": [
  {
   "name": "page1",
   "elements": [
    {
     "type": "text",
     "name": "Enter percentage (0-100)",
     "validators": [
      {
       "type": "numeric",
       "minValue": 0,
       "maxValue": 100
      }
     ],
     "inputType": "number",
     "min": "0",
     "max": "100"
    }
   ]
  }
 ]
}
Oggy
  • 1,516
  • 1
  • 16
  • 22
  • Thank you this worked for the second part of my question, do you have any idea about the first part? – AWIXOR Jan 19 '21 at 14:44
  • Do you mean the part about using a third-party component as an input field? Are you looking for a masked input with a percentage sign? – Oggy Jan 19 '21 at 16:10
  • No I want to use an addon that shows the mark `%`, like in these examples: https://getbootstrap.com/docs/4.0/components/input-group/ – AWIXOR Jan 20 '21 at 16:08
  • 1
    Here's a react example on how to extend SurveyJS to add masking with % sign and other similar input options: https://codesandbox.io/s/romantic-night-v7mxr?file=/src/SurveyComponent.jsx I based this on the official example from here: https://surveyjs.io/Examples/Library?id=custom-widget-inputmask and it uses the following library: https://robinherbots.github.io/Inputmask/ – Oggy Jan 20 '21 at 16:21
  • Thank you so much brother, I was looking for this for a while! – AWIXOR Jan 21 '21 at 06:38