JavaScript Range Slider

Source code: Survey setup
Survey.defaultBootstrapCss.navigationButton = "btn btn-primary";
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: "Please range"}
 ]});


var widget = {
    name: "nouislider",
    isFit : function(question) { return question["renderAs"] === 'nouislider'; }
}

Vue.component(widget.name, {
    props: ['question', 'css', 'isEditMode'],
    template: "<div id='slider'></div>",
    mounted: function () {
        var vm = this;
        var slider = vm.$el;        
        noUiSlider.create(slider, {
            start: (vm.question.value && vm.question.value.length) ? vm.question.value : [30, 70],
            connect: true,
            range: {
                'min': 0,
                'max': 100
            }
        });
        slider.noUiSlider.on('set', function(){
            vm.question.value = slider.noUiSlider.get();
        });
    },
    destroyed: function () {
         this.$el.noUiSlider.destroy();   
     }
})
Survey.CustomWidgetCollection.Instance.addCustomWidget(widget);

survey.data = { range: ["20.00", "80.00"] };

new Vue({ el: '#surveyElement', data: { survey: survey } });