Edit in JSFiddle

Survey.defaultBootstrapCss.navigationButton = "btn btn-green";
Survey.Survey.cssType = "bootstrap";
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.create(slider, {
      start: (question.value && question.value.length) ? question.value : [30, 70],
      connect: true,
      pips: {
        mode: 'steps',
        stepped: true,
        density: 4
      },
      range: {
        'min': 0,
        'max': 100
      }
    });
    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: ["20.00", "80.00"]
};

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

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

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

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

#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;
}