Added bootstrap-slider custom widget prototype (work for #13 - widget request "bootstrap slider")

Author: tsv2013

package.json

@@ -8,6 +8,7 @@
   },
   "private": true,
   "devDependencies": {
+    "bootstrap-slider": "^10.0.0",
     "clean-webpack-plugin": "^0.1.17",
     "copy-webpack-plugin": "^4.1.1",
     "easy-autocomplete": "^1.3.5",

src/bootstrap-slider.js

@@ -0,0 +1,66 @@
+var Slider = require("bootstrap-slider");
+
+function init(Survey) {
+  var widget = {
+    name: "bootstrap-slider",
+    title: "Bootstrap Slider",
+    iconName: "icon-bootstrap-slider",
+    widgetIsLoaded: function() {
+      return typeof Slider != "undefined";
+    },
+    isFit: function(question) {
+      return question.getType() === "bootstrapslider";
+    },
+    htmlTemplate: "<div></div>",
+    activatedByChanged: function(activatedBy) {
+      Survey.JsonObject.metaData.addClass("bootstrapslider", [], null, "empty");
+      Survey.JsonObject.metaData.addProperties("bootstrapslider", [
+        {
+          name: "step:number",
+          default: 1
+        },
+        {
+          name: "rangeMin:number",
+          default: 0
+        },
+        {
+          name: "rangeMax:number",
+          default: 100
+        }
+      ]);
+    },
+    afterRender: function(question, el) {
+      var inputEl = document.createElement("input");
+      inputEl.id = question.id;
+      inputEl.type = "text";
+      inputEl.setAttribute("data-slider-id", question.name + "_" + question.id);
+      inputEl.setAttribute("data-slider-min", question.rangeMin);
+      inputEl.setAttribute("data-slider-max", question.rangeMax);
+      inputEl.setAttribute("data-slider-step", question.step);
+      inputEl.setAttribute("data-slider-value", question.value);
+      el.appendChild(inputEl);
+      var slider = new Slider(inputEl, {});
+
+      slider.on("change", function(valueObj) {
+        question.value = slider.getValue();
+      });
+      var updateValueHandler = function() {
+        slider.setValue(question.value);
+      };
+      question.bootstrapSlider = slider;
+      question.valueChangedCallback = updateValueHandler;
+    },
+    willUnmount: function(question, el) {
+      question.bootstrapSlider.destroy();
+      question.bootstrapSlider = null;
+    }
+  };
+
+  Survey.CustomWidgetCollection.Instance.addCustomWidget(widget, "customtype");
+}
+
+if (typeof Survey !== "undefined") {
+  init(Survey);
+}
+
+export default init;

src/surveyjs-widgets.js

@@ -11,3 +11,4 @@ export { default as sortablejs } from "./sortablejs.js";
 export { default as ckeditor } from "./ck-editor.js";
 export { default as autocomplete } from "./easy-autocomplete.js";
 export { default as prettycheckbox } from "./pretty-checkbox.js";
+export { default as bootstrapslider } from "./bootstrap-slider.js";

webpack.config.js

@@ -33,7 +33,8 @@ var widgets = [
   "nouislider",
   "ck-editor",
   "easy-autocomplete",
-  "pretty-checkbox"
+  "pretty-checkbox",
+  "bootstrap-slider"
 ];
 
 var dependencies = {
@@ -47,7 +48,8 @@ var dependencies = {
   inputmask: "^3.3.10",
   "jquery-bar-rating": "^1.2.2",
   "easy-autocomplete": "^1.3.5",
-  "pretty-checkbox": "^3.0.3"
+  "pretty-checkbox": "^3.0.3",
+  "bootstrap-slider": "^10.0.0"
 };
 
 var entry = {};