Hello
Is it possible to code so that data is not shown after decimal points?
Default is .00, but I want to only first one number without decimal
Regards
Mateusz
Hello
Is it possible to code so that data is not shown after decimal points?
Default is .00, but I want to only first one number without decimal
Regards
Mateusz
Hello Mateusz,
To remove a decimal part for values which appear within a NoUI Slider tooltip, you can customize the tooltips
property of a NoUISlider widget. Consider the following code example taken from the https://refreshless.com/nouislider/ documentation:
JavaScriptformat: wNumb({
decimals: 0
}),
To modify the format for a SurveyJS No UI Slider, you can override the NoUISlider implementation and apply the format. I copied the nouislider widget implementation and modified the tooltips
property to remove a decimal part:
nouislider.js
JavaScriptimport noUiSlider from "nouislider";
import * as Survey from "survey-core";
import wNumb from "wnumb";
export const initSlider = () => {
const iconId = "icon-nouislider";
const componentName = "nouislider";
fetch("./nouislider.svg")
.then((response) => response.text())
.then((svg) => {
Survey.SvgRegistry.registerIconFromSvg(iconId, svg);
});
var widget = {
name: componentName,
title: "noUiSlider",
iconName: iconId,
widgetIsLoaded: function () {
return typeof noUiSlider != "undefined";
},
isFit: function (question) {
return question.getType() === componentName;
},
htmlTemplate: "<div><div></div></div>",
activatedByChanged: function (activatedBy) {
Survey.Serializer.addClass(componentName, [], null, "empty");
let registerQuestion =
Survey.ElementFactory.Instance.registerCustomQuestion;
if (!!registerQuestion) registerQuestion(componentName);
Survey.Serializer.addProperties(componentName, [
{
name: "step:number",
category: "slider",
categoryIndex: 1,
default: 1
},
{
name: "rangeMin:number",
category: "slider",
default: 0
},
{
name: "rangeMax:number",
category: "slider",
default: 100
},
{
name: "pipsMode",
category: "slider",
default: "positions"
},
{
name: "pipsValues:itemvalues",
category: "slider",
default: [0, 25, 50, 75, 100]
},
{
name: "pipsText:itemvalues",
category: "slider",
default: [0, 25, 50, 75, 100]
},
{
name: "pipsDensity:number",
category: "slider",
default: 5
},
{
name: "orientation",
category: "slider",
default: "horizontal",
choices: ["horizontal", "vertical"]
},
{
name: "direction:string",
category: "slider",
default: "ltr"
},
{
name: "tooltips:boolean",
category: "slider",
default: true
}
]);
},
afterRender: function (question, el) {
el.style.paddingBottom = "19px";
el.style.paddingLeft = "20px";
el.style.paddingRight = "20px";
el.style.paddingTop = "44px";
el = el.children[0];
el.style.marginBottom = "60px";
if (question.orientation === "vertical") {
el.style.height = "250px";
el.style.marginLeft = "60px";
}
var slider = noUiSlider.create(el, {
start:
question.rangeMin <= question.value &&
question.value <= question.rangeMax
? question.value
: (question.rangeMin + question.rangeMax) / 2,
connect: [true, false],
step: question.step,
tooltips: wNumb({
decimals: 0
}),
pips: {
mode: question.pipsMode || "positions",
values: question.pipsValues.map(function (pVal) {
var pipValue = pVal;
if (pVal.value !== undefined) {
pipValue = pVal.value;
}
return parseInt(pipValue);
}),
density: question.pipsDensity || 5,
format: {
to: function (pVal) {
var pipText = pVal;
question.pipsText.map(function (el) {
if (el.text !== undefined && pVal === el.value) {
pipText = el.text;
}
});
return pipText;
}
}
},
range: {
min: question.rangeMin,
max: question.rangeMax
},
orientation: question.orientation,
direction: question.direction
});
slider.on("change", function () {
question.value = Number(slider.get());
});
question.updateSliderProperties = function () {
const elems = document.getElementsByClassName("noUi-pips");
if (elems.length > 0) elems[elems.length - 1].style.display = "none";
if (elems.length > 1) elems[elems.length - 2].style.display = "none";
var getStart = function (currentStart) {
return (
question.rangeMin +
Math.round((currentStart - question.rangeMin) / question.step) *
question.step
);
};
slider.updateOptions(
{
step: question.step,
start:
question.rangeMin <= question.value &&
question.value <= question.rangeMax
? getStart(question.value)
: getStart((question.rangeMin + question.rangeMax) / 2),
range: {
min: question.rangeMin,
max: question.rangeMax
}
},
true
);
slider.pips({
mode: question.pipsMode || "positions",
values: question.pipsValues.map(function (pVal) {
var pipValue = pVal;
if (pVal.value !== undefined) {
pipValue = pVal.value;
}
return parseInt(pipValue);
}),
density: question.pipsDensity || 5,
format: {
to: function (pVal) {
var pipText = pVal;
question.pipsText.map(function (el) {
if (el.text !== undefined && pVal === el.value) {
pipText = el.text;
}
});
return pipText;
}
}
});
};
var updateValueHandler = function () {
slider.set(question.value);
};
if (question.isReadOnly) {
el.setAttribute("disabled", true);
}
updateValueHandler();
question.noUiSlider = slider;
question.registerFunctionOnPropertiesValueChanged(
[
"pipsValues",
"step",
"rangeMin",
"rangeMax",
"pipsMode",
"pipsDensity"
],
question.updateSliderProperties
);
question.valueChangedCallback = updateValueHandler;
question.readOnlyChangedCallback = function () {
if (question.isReadOnly) {
el.setAttribute("disabled", true);
} else {
el.removeAttribute("disabled");
}
};
},
willUnmount: function (question, el) {
if (!!question.noUiSlider) {
question.noUiSlider.destroy();
question.noUiSlider = null;
}
question.readOnlyChangedCallback = null;
question.valueChangedCallback = null;
if (!question.updateSliderProperties) return;
question.unRegisterFunctionOnPropertiesValueChanged(
[
"pipsValues",
"step",
"rangeMin",
"rangeMax",
"pipsMode",
"pipsDensity"
],
question.updateSliderProperties
);
question.updateSliderProperties = undefined;
},
pdfRender: function (_, options) {
if (options.question.getType() === componentName) {
var point = options.module.SurveyHelper.createPoint(
options.module.SurveyHelper.mergeRects.apply(null, options.bricks)
);
point.xLeft += options.controller.unitWidth;
point.yTop +=
options.controller.unitHeight *
options.module.FlatQuestion.CONTENT_GAP_VERT_SCALE;
var rect = options.module.SurveyHelper.createTextFieldRect(
point,
options.controller
);
var textboxBrick = new options.module.TextFieldBrick(
options.question,
options.controller,
rect,
true,
options.question.id,
options.question.value || options.question.defaultValue || "",
"",
options.question.isReadOnly,
false,
"text"
);
options.bricks.push(textboxBrick);
}
}
};
Survey.CustomWidgetCollection.Instance.addCustomWidget(widget, "customtype");
};
SurveyComponent.jsx
JavaScriptimport { initSlider } from "./noUISlider";
import "nouislider/distribute/nouislider.css";
initSlider();
...
I hope this example helps. Please let me know if you have any further questions.
P.S. We hope you enjoyed the level of service you received. If so, we would love if you could leave your feedback on SurveyJS page at g2.com. As we’re building our business, every review helps build credibility for future customers and your feedback would be greatly appreciated.