Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

Problem with Sliders

  • ericgraig
  • ericgraig's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
5 years 9 months ago - 5 years 9 months ago #171027 by ericgraig
Problem with Sliders was created by ericgraig
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.



Last edit: 5 years 9 months ago by ericgraig.
The topic has been locked.
  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
5 years 9 months ago - 5 years 9 months ago #171059 by DenisChenu
Replied by DenisChenu on topic Problem with Sliders
Edit your theme and add
Code:
.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 , plugin development .
I don't answer to private message.
Last edit: 5 years 9 months ago by DenisChenu.
The following user(s) said Thank You: tpartner, ericgraig
The topic has been locked.
More
5 years 8 months ago #172072 by aellison9
Replied by aellison9 on topic 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.
Code:
// 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
        sliderSelection.hide();
 
        // 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
        slider.relayout();
 
        // 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;
              sliderSelection.show();
            }
        });
    };
 
    // 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
        myFunc(slider);
    }
}

Happy to answer questions if this doesn't make sense.
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose