Problem with Sliders

4 months 3 days ago - 4 months 3 days ago #171027 by ericgraig
ericgraig created the topic: 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.

Last Edit: 4 months 3 days ago by ericgraig.

Please Log in or Create an account to join the conversation.

4 months 3 days ago - 4 months 3 days ago #171059 by DenisChenu
DenisChenu replied the topic: 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 .
Last Edit: 4 months 3 days ago by DenisChenu.
The following user(s) said Thank You: tpartner, LouisGac, ericgraig

Please Log in or Create an account to join the conversation.

3 months 1 week ago #172072 by aellison9
aellison9 replied the 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.
// 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.

Please Log in or Create an account to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now
Join our Newsletter!