Hi to all!
I am quite new to formr and these email chains have been super useful to get ideas on what I could do with the slide bars! I downloaded Max and Jannis's Google doc to give it a try and but some reason, it would not show a slidebar at all, just a plain number item. I have tried to change parts of the Google sheet code which could make sense like adding quotations marks: var slider = $("#" + questionName + "Range") ->>>> var slider = $("#" + "questionName" + "Range"). Or like changing questionName for the item name "slider 1": var slider = $("#" + slider1 + "Range") OR var slider = $("#" + "slider1" + "Range"). But the furthest I've gotten was to get two text boxes for question 1.
As I said, I would like to use your code for one of my items in which I ask people to think about the percentage of time they devote to working with people vs. things. The name of the item in my Excel spreadsheet is predigerPT, I have set the type column to number and I have nothing in the class or choices columns. Here is the code I have used in the label column:
**Thinking about your job, how much time do you spend working with people/animals and things? You can use the slider to mark the percentaje of time you devote working with people or animals. The remaining percentage will be the time you use to work with things. For example, if you move the slider to 40, it would mean that you expend 40% of the time working with people and 60% working with things.**
<script>
$(document).ready ( function() {
var questionName = "predigerPT"; // change this to formr name of the item
var question = $("input[name=" + predigerPT + "]"); // the formr input field
var slider = $("#" + predigerPT + "Range"); // the bootstrap slider
question.hide(); // hide the number field
slider.appendTo(question.parent()); // move slider to the correct column
slider.slider(); // initiate the bootstrap slider
slider.on("change", function(slideEvt) {
//console.log("change event");
question.val(slideEvt.value.newValue); // fill the value into the formr number field
$(question.parent()).find(".slider-handle").css("display","block"); // make the handle visible
});
});
</script>
<!-- change the id to the formr-item-name + Range-->
<input id="predigerPTRange" type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="50" data-slider-ticks-snap-bounds="0" data-slider-ticks="[0, 100]" data-slider-ticks-labels='["People or animals (e.g.: meeting with people in the company/users/clients, discussing different approaches with people/users/clients, working with or directing a team, working closely with animals).", "Things (e.g.: working with different objects, tools, materials or machines)."]' data-slider-tooltip="hide" data-slider-enabled="true" >
I have also tried different versions of this code but nothing works really. I have also tried the CSS, but I am not sure how to adapt it to my survey to be honest, so I don't think that is really an option for me.
I would really appreciate it if someone could give me a hand (:
Thanks in advance!!
Alice
P.S.: do you have specific ways of citing the authors of this bits of code?