How to remove the decimals on noUiSlider?

[msbt]

I tried editing the json file, but no dice... Any pointers on how I can remove the .00 decimals on a rangeslider? I have a slider that should only show integers (like how many people are coming to that event). I'm trying to implement that in WordPress, so a general solution would be nice.

Example: https://www.surveyjs.io/Examples/Library/?id=custom-widget-nouislider

Best regards,
Matthias

[tsv2013]

At this moment there is no such an option for the noUiSlider custom widget. We need to implement it in the widget source code - https://github.com/surveyjs/widgets/blob/master/src/nouislider.js#L80-L90

I've added this enhancement in our task list

[msbt]

ok cool, in the meantime I just added tooltips: wNumb({decimals: 0}), to get rid of the decimals

[tsv2013]

Did you modify the nouislider custom widget source code?

[msbt]

no, the surveyjs/libs/surveyjs-widgets.js file, that part here:

      var slider = __WEBPACK_IMPORTED_MODULE_0_nouislider___default.a.create(el, {
        start: question.value || (question.rangeMin + question.rangeMax) / 2,
        connect: [true, false],
        step: question.step,
        tooltips: wNumb({decimals: 0}),
        pips: {
          mode: question.pipsMode || "positions",
          ...

and this is how it looks:

[tsv2013]

Did you add the wnumb library? - https://refreshless.com/wnumb/

[msbt]

yes

[johannesschobel]

Dear @tsv2013 and @msbt ,

i think, the issue is also with the data value of respective slider. Currently, the slider returns "4.00" (as string) in your example. However, you may want to have 4 (as number).

I fixed it via

slider.on("change", function() {
  question.value = wNumb({decimals: 0}).from(slider.get());
});

in the same file, however, this is not a permanent fix (as the file is updated with every npm install again).

Can we support the format option of the nouislider described here https://refreshless.com/nouislider/number-formatting/ ?

All the best

[johannesschobel]

Maybe the even better fix would be to just cast it to a number?
Like so:

slider.on("change", function() {
  question.value = Number(slider.get());
});

[tsv2013]

We can't add a hard cast in our code because other users can use the float numbers. But you can modify the question value in the https://surveyjs.io/Documentation/Library?id=surveymodel#onValueChanging event handler

[johannesschobel]

But casting it with Number(value) would certainly work, because currently it is a decimal number formatted as string, right?!

[johannesschobel]

Can we have some kind of hook to format the visual output (i.e. the number shown next to the handle)?

And if that is not possible, maybe just a numeric input field to enter the number of decimals to be shown (i.e. "0" would remove the decimals completely). Internally you could rely on wNumb() as discussed above..

[JaneSjs]

Hi @johannesschobel,
Please be informed that the Slider and Range Slider question types are available within SurveyJS Form Library: View Demo. We recommend that you consider using a built-in Slider/Range question type instead.

Should you have any further questions, please feel free to reach out to us at anytime.