Custom Range Slider Implementation (+ slider handle initially hidden)

J. Kreienkamp

unread,

Oct 23, 2019, 12:16:19 PM10/23/19

to formr

Hey wonderful form{`r}-community,

For a current project, we have implemented the range sliders of the bootstrap-slider.js plugin into our surveys (see run JSON attached; also see Kyle J. Kemp's Github Repository, and examples here).

We did this because we needed:

- multiple tick labels

- a validation for sliders, and

- no obvious start value (to avoid anchoring effects)

For the implementation, we relied on the earlier suggestions by Ruben (unfortunately, I can't find the original post anymore).

It is currently very crude and not very dynamic, but it does the job.

However, one problem that we encounter is that the validation message is now popping up in the upper left corner - because it is linked to the now hidden input field (which saves the value of the slider).

Would you have any suggestions on how to link that back to the slider?

Thank you in advance and happy form{`r}-ing,

Jannis

slidertest.json

J. Kreienkamp

unread,

Oct 26, 2019, 4:24:53 PM10/26/19

to formr

Hi everyone,

We cleaned up the code a little and added some comments (note: the same process could be applied for any javascript plugin). You can find the updated JSON file attached and a short description below. Please keep in mind that we are not educated programmers but did this by googling and trial and error. We hope this is helpful to someone.

Here a screenshot of what we wanted to achieve:

What we did:

- In the Run's Javascript tab (Run --> Settings --> JS) we added the Javascript of the bootstrap-slider-js (current version here)

- In the Run's CSS tab (Run --> Settings --> CSS) we added the CSS of the bootstrap-slider-js (current version here) and the following adjustments:

.slider.slider-horizontal{
  width: 80% !important; /* make slider wider */
}

.slider-selection {
    opacity: 0; /* hide the slider selection*/
}

.slider-handle {
    display: none; /* hide slider handle on load */
    /*background: blue;*/
}

/* format the tick labels (both when selected and when not selected) */
/* if you don't like the grey tick-circles set opacity to zero */
.slider-tick.round {
    /*width: 10px;*/
    background: grey;
    opacity: 0.6;
}

.slider-tick.round.in-selection{
    background: grey;
    opacity: 0.6;
}

- In the Google Sheet, we added a row that is a 'type': "number" and has the 'name': "slider 1". This is what goes into the 'label' field:


**Question 1**
<script> 
     $(document).ready ( function() {
        var questionName = "slider1"; // change this to formr name of the item
        var question = $("input[name=" + questionName + "]"); // the formr input field
        var slider = $("#" + questionName + "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="slider1Range" 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='["None", "All"]' data-slider-tooltip="hide" data-slider-enabled="true" >

For it to work you need to adjust the questionName in the script and the id of the input element.

Again, we are not very proficient programmers so, please excuse unconventional, ineffective, or complicated bits. Also, we didn't manage to fix the weird validation message pop-up.

Have a great weekend and happy form{`r}-ing,

Max and Jannis

slidertest_commented.json

Alice Diaz

unread,

Oct 23, 2020, 9:30:14 AM10/23/20

to formr

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.**

$(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>

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?

Florian Kühlwein

unread,

Dec 6, 2023, 7:41:37 AM12/6/23

to formr

Hey everybody,

I tried to follow your directions Max and Jannis but somehow I am also just getting two text boxes instead of a slider. I included the provided JS and CSS files in the run configuration and I also adjusted the code in the 'label' field in the Google sheet file.

Did anybody apart from Alice encounter the same problem?

Thanks in advance and have a great day,

Florian

Reply all

Reply to author

Forward