widget example - JSFiddle - JSFiddle

by drawcard

HTML

<script src="https://unpkg.com/[email protected]"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/distribute/nouislider.min.css">
<script src="https://unpkg.com/[email protected]"></script>
<script src="https://fonts.googleapis.com/css?family=Montserrat:300,400,700"></script>

<div id="surveyElement"></div>

<div id="result"></div>

SCSS

// Demo styling
html {
  padding: 20px;
  font-family: "Montserrat", Helvetica, Arial, sans-serif;
}
#surveyElement h5 {
  margin-bottom: 60px;
}
input[type=button] {
  background-color: #fff;
  color: #ed5c65;
  border: 2px solid #ed5c65;
  border-radius: 4px;
  padding: 5px;
  font-size: 18px;
}

// Onward

#slider {
  margin-bottom:50px;
  
  .noUi-connect {
    background: #1ab394;
  }
}

.btn-green {
  background-color: #1ab394;
  color: #fff;
  border-radius: 3px;
  
  &:hover, &:focus {
    background-color: #18a689;
    color: #fff;
  }
}

.panel-footer {
    text-align: right;
    background-color: #fff;
}
.noUi-value-horizontal {
  margin-top: 5px;
}
.noUi-tooltip {
  border: 0px;
  background: none transparent;
  font-size: 30px;
  font-weight: 300;
}

JavaScript

Survey.defaultBootstrapCss.navigationButton = "btn btn-green";
Survey.JsonObject.metaData.addProperty("checkbox", {
  name: "renderAs",
  default: "standard",
  choices: ["standard", "nouislider"]
});
var survey = new Survey.Model({
  questions: [{
    type: "checkbox",
    renderAs: "nouislider",
    name: "range",
    title: "Set a value range"
  }]
});


var widget = {
  name: "nouislider",
  htmlTemplate: "<div id='slider'></div>",
  isFit: function(question) {
    return question["renderAs"] === 'nouislider';
  },
  afterRender: function(question, el) {
    var slider = el.querySelector("#slider");

		// noUISlider docs: https://refreshless.com/nouislider/
    noUiSlider.create(slider, {
      start: (question.value && question.value.length) ? question.value : [1, 10],
      connect: true,
      pips: {
        mode: 'steps',
        density: 10
      },
      step: 1,
      tooltips: true,
      range: {
        'min': 0,
        'max': 10
      },
      // Remove decimal digits from the tooltip: 
      // https://stackoverflow.com/a/31632633
      format: {
      to: function ( value ) {
        return value + '';
      },
      from: function ( value ) {
        return value.replace('', '');
      }
    }
    });
    slider.noUiSlider.on('set', function() {
      question.value = slider.noUiSlider.get();
    });
  },
  willUnmount: function(question, el) {
    var slider = el.querySelector("#slider");
    slider.noUiSlider.destroy();
  }
}
Survey.CustomWidgetCollection.Instance.addCustomWidget(widget);
survey.data = {
  range: 10
};

survey.onComplete.add(function(result) {
	document.querySelector('#result').innerHTML = "result: " + JSON.stringify(result.data);
});

$("#surveyElement").Survey({
  model: survey
});