I have initiated a new Next.js project and I am using the demo code from:
https://surveyjs.io/form-library/examples/custom-widget-nouislider/reactjs#content-code
But the handle is not placed in the correct position as shown in the photo. The following code is similar to the demo but with the changed nouislider.css directory at nouislider/dist.
JavaScript"use client";
import React from "react";
import { Model } from "survey-core";
import { Survey } from "survey-react-ui";
import "survey-core/defaultV2.min.css";
import * as SurveyCore from "survey-core";
import noUiSlider from "nouislider";
import { nouislider } from "surveyjs-widgets";
import "nouislider/dist/nouislider.css";
const json = {
elements: [
{
type: "nouislider",
name: "range",
title: "Please range",
},
],
};
nouislider(SurveyCore);
function SurveyComponent() {
const survey = new Model(json);
survey.onComplete.add((sender, options) => {
console.log(JSON.stringify(sender.data, null, 3));
});
return <Survey model={survey} />;
}
export default SurveyComponent;
Hello,
Perhaps, the issue with a slider handle relates to some CSS / customizations. For me to move forward and research this issue, I need to reproduce it on my end. Please feel free to update this CodeSandbox demo or send a minified version of your project to help me reproduce the issue and research it.
Thank you