Question T15028
Visible to All Users

nouislider remove decimals

created a year ago

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

Answers approved by surveyjs Support

created a year ago

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:

JavaScript
format: 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

JavaScript
import 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

JavaScript
import { initSlider } from "./noUISlider"; import "nouislider/distribute/nouislider.css"; initSlider(); ...

View CodeSandbox

Clipboard-File-1.png

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.

    Comments (2)
    MM MM
    Mateusz Michna a year ago

      awesome, thank you

        No problem. Please feel free to contact us if you have any further questions.