Problem with Sliders

4 Monate 3 Tage her - 4 Monate 3 Tage her #171027 von ericgraig
ericgraig erstellte das Thema Problem with Sliders
I have created a slider but when viewing it, it appears as follows:

Here are the settings. It seems to me that there ought to be a way to NOT display the green bar. Is this a bug or is there a setting I've missed. I'm pretty sure that green bar will bias the responses. Frankly, I'd like to get rid of the green bar altogether or if that's not possible at least not show it before the respondent begins the survey. Any ideas? I am using the current version of LimeSurvey that is available online. That is, I have not set it up on my own server.

Letzte Änderung: 4 Monate 3 Tage her von ericgraig.

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

4 Monate 3 Tage her - 4 Monate 3 Tage her #171059 von DenisChenu
DenisChenu antwortete auf das Thema: Problem with Sliders
Edit your theme and add
.slider-selection{background: transparent; background-image:none}
in custom.css

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand (or search sondages pro).
An error happen ? Before make a new topic : remind the Debug mode .
Letzte Änderung: 4 Monate 3 Tage her von DenisChenu.
Folgende Benutzer bedankten sich: tpartner, LouisGac, ericgraig

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

3 Monate 1 Woche her #172072 von aellison9
aellison9 antwortete auf das Thema: Problem with Sliders
Hi EricCraig,
I agree with your opinion on bias, and we have developed some JS which solves the issue for us. You can add this to individual questions if you wish, but we chose to include the styling in our custom.js for all sliders. I included some screen shots so you can see the before and after effects. "slider_before.png" shows the initial rendering when a page with sliders comes up. "slider_after.png" shows what occurs as sliders are manipulated. Hope it helps.

The code snippet assumes you might have multiple sliders as subquestions and is also designed to exisit within custom.js at the theme level. If you want to apply this at the question level, you should be able to remove the "function" wrapper and paste into the question source.

You can simplify and elimite the nested function by using "let" instead of "var" but we opt'ed for legacy browser support.
// This function stylizes sliders on the page and registers the "slideStart" event
// The defualt choice for all sliders in this theme is to set the tooltip to a value of
// "Please Select" and hide the selection bar until an initial value has been selected.
function stylizeSlider() {
    // Create an object containing all the sliders on the page
    var sliders = window.activeSliders;
    // Since we might be dealing with multiple sliders on a page, we are defining a separate funtion
    // to properly handle variable scoping for each slider.
    var myFunc = function (slider) {
        // Initialize a boolean to track whether the slider has been manipulated 
        var slideStarted = false;
        // Get the div of slider selection (so we can hide/show)
        var sliderSelection = $(slider.getElement()).find(".slider-track .slider-selection");
        // Hide the slider selction on the initial rendering of the slider
        // Set the initial value of the tooltip to "Please Select" unless the slider
        // has already been changed.
        slider.setAttribute('formatter', function(val) {
            return slideStarted ? val : "Please Select";
        // Relayout the slider to apply the formatter change above
        // Register the "slideStart" event of the slider to change the tool tip and show the selection
        // bar when the slider is changed.
        slider.on('slideStart', function() {
            if (!slideStarted) {
              slideStarted = true;
    // Loop through the sliders on the page to apply the default formatting
    for (var value of Object.keys(sliders)) {
        // Get a handle for each slider within the object
        var slider = window.activeSliders[value].getSlider();
        // Set the styling for each slider

Happy to answer questions if this doesn't make sense.

Bitte Anmelden oder Registrieren um an der Konversation teilzunehmen.

Jetzt loslegen!

Melden Sie sich jetzt an, und erstellen Sie in wenigen Minuten Ihre erste Umfrage.

Account einrichten

Abonnieren Sie unseren Newsletter

Abonnieren Sie unseren Newsletter für alle Neuigkeiten rund um LimeSurvey