Welcome to the LimeSurvey Community Forum

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

How to use Vertical Silder

Joffm
Topic Author
Offline
LimeSurvey Community Team

More

2 years 6 months ago #258194 by Joffm

How to use Vertical Silder was created by Joffm

Sorry, you did not answer the questions at the beginning.

And what do you mean by "max and min range"?

My opinion: Don't use it, It is really not very appealing.

Joffm

Volunteers are not paid.
Not because they are worthless, but because they are priceless

Please Log in to join the conversation.

jelo
Offline
Platinum Member

More

2 years 6 months ago - 2 years 6 months ago #258199 by jelo

Replied by jelo on topic How to use Vertical Silder

Joffm wrote:
And what do you mean by "max and min range"?

That is the slider with two handles where you set the max and min value of a range.

github.com/tpartner/LimeSurvey-Range-Slider-5x-6x

Attachment not found

The meaning of the word "stable" for users
www.limesurvey.org/forum/development/117...ord-stable-for-users

Last edit: 2 years 6 months ago by jelo.

Please Log in to join the conversation.

tpartner
Offline
LimeSurvey Community Team

More

2 years 6 months ago #258251 by tpartner

Replied by tpartner on topic How to use Vertical Silder

In rangeSlider.js, you will need to add the orientation: "vertical" option to the slider initialization

- github.com/seiyria/bootstrap-slider

Code:

// Initate the range slider
$('[data-id="range'+opts.id+'"]', thisQuestion).slider({
    min: opts.sliderMin,
    max: opts.sliderMax,
    step: opts.sliderStep,
    range: true,
    orientation: 'vertical',
    value: [Number(lowValue),Number(highValue)]
})

Then, you will need to use a little CSS to clean up the layout and place your questions side-by-side.

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Please Log in to join the conversation.

DenisChenu
Offline
LimeSurvey Community Team & Official Partner

More

2 years 6 months ago #258269 by DenisChenu

Replied by DenisChenu on topic How to use Vertical Silder

github.com/tpartner/LimeSurvey-Range-Sli...meric/assets/scripts

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member. - Professional support - Plugins, theme and development .
I don't answer to private message.

Please Log in to join the conversation.

tpartner
Offline
LimeSurvey Community Team

More

2 years 6 months ago #258298 by tpartner

Replied by tpartner on topic How to use Vertical Silder

You cannot edit custom question files in the LimeSurvey theme editor.

You need to edit in an external code editor and re-upload.

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Please Log in to join the conversation.

Joffm
Topic Author
Offline
LimeSurvey Community Team

More

2 years 6 months ago - 2 years 6 months ago #258311 by Joffm

Replied by Joffm on topic How to use Vertical Silder

Hi,
now you see the disadvantage, if somebody does not answer the initial questions about version, hosting, etc.
Assuming you have access to the server and the LimeSurvey installation.

1.You find this question theme here
[url] github.com/tpartner/LimeSurvey-Range-Slider-5x-6x [/url]

2. In the description of this question theme you see this (the place where it is installed)
Extract the download and upload the Range-Slider folder to /pathToLimeSurvey/upload/themes/question/

3. Now you know the folder
You find the mentioned file "rangeSlider.js" here
/pathToLimeSurvey/upload/themes/question/Range-Slider/survey/questions/answer/multiplenumeric/assets/scripts
This file ("rangeSlider.js") you have to download, edit, and upload.

Alternative:
Deinstall the theme, edit the file locally and upload the entire folder again.
And activate again.

Joffm

Volunteers are not paid.
Not because they are worthless, but because they are priceless

Last edit: 2 years 6 months ago by Joffm.

Please Log in to join the conversation.

tpartner
Offline
LimeSurvey Community Team

More

2 years 6 months ago #258355 by tpartner

Replied by tpartner on topic How to use Vertical Silder

I would consider changing your layout design. There is no way you will get that to work on smaller (mobile) screens.

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Please Log in to join the conversation.

tpartner
Offline
LimeSurvey Community Team

More

2 years 6 months ago #258410 by tpartner

Replied by tpartner on topic How to use Vertical Silder

I don't understand - originally you asked about a range slider but your screenshot depicts a normal slider.

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Please Log in to join the conversation.

tpartner
Offline
LimeSurvey Community Team

More

2 years 6 months ago #258582 by tpartner

Replied by tpartner on topic How to use Vertical Silder

If you want to use a core multiple numeric question, there is a setting for slider orientation - www.limesurvey.org/manual/Question_type_...lider_orientation.29

If you want the sliders side-by-side on larger screens, add some CSS like this to the question source:

Code:

<style type="text/css" data-author="Tony Partner">
    @media only screen and (min-width: 768px) {
        #question{QID} .answer-container .row {
            margin: 0;
        }

        #question{QID} .answer-container ul {
            display: grid;
            grid-auto-flow: column;
            grid-gap: 3px;
        }

        #question{QID} .answer-container li {
            display: block;
            padding: 0;
            border: 1px solid #e7e7e7;
        }

        #question{QID} .answer-container li > div > div label {
            display: block;
            margin: 1em 0 1.5em;
            width: 100%;
            text-align: center;
            padding: 0;
        }

        #question{QID} .answer-container li > div > div > div {
            width: 100%;
            text-align: center;
            padding: 0 !important;
        }

        #question{QID} .answer-container .ls-slider-answer-row {
            margin: 0;
            width: 100%;
        }

        #question{QID} .answer-container .slider.slider-vertical {
            margin-bottom: 1em;
        }
    }
</style>

Sample survey:

File Attachment:

File Name: limesurvey...3-14.lss
File Size:29.98 KB

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Please Log in to join the conversation.

rajkumar_dms
Offline
Elite Member

More

2 years 5 months ago #259624 by rajkumar_dms

Replied by rajkumar_dms on topic How to use Vertical Silder

Hi Tpartner,

Can you show the this slider answer option will be show at bottom poisition

Please Log in to join the conversation.

tpartner
Offline
LimeSurvey Community Team

More

2 years 5 months ago #259625 by tpartner

Replied by tpartner on topic How to use Vertical Silder

No, not with pure CSS. This would require JavaScript development or a custom question theme.

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Please Log in to join the conversation.

rajkumar_dms
Offline
Elite Member

More

2 years 5 months ago #259725 by rajkumar_dms

Replied by rajkumar_dms on topic How to use Vertical Silder

Hi,

Could you help me on this

Please Log in to join the conversation.

tpartner
Offline
LimeSurvey Community Team

More

2 years 5 months ago #259808 by tpartner

Replied by tpartner on topic How to use Vertical Silder

rajkumar_dms wrote:
Can you show the this slider answer option will be show at bottom poisition

1) Add this JavaScript to the question source:

Code:

<script type="text/javascript" data-author="Tony Partner">
    
   $(document).on('ready pjax:scriptcomplete',function(){
            
        // Move the slider labels
		$('#question{QID} .ls-slider-item-row').each(function(i) {
            $('label', this).insertAfter($('> div:eq(0)', this));
        });
        
    });
</script>

2) Add this CSS to the question source:

Code:

<style type="text/css" data-author="Tony Partner">
    @media (max-width: 768px) {
        #question{QID} .answer-container li > div > div label {
            margin: 1.5em 0;
        }
    }
	
	
	@media only screen and (min-width: 768px) {
        #question{QID} .answer-container .row {
            margin: 0;
        }

        #question{QID} .answer-container ul {
            display: grid;
            grid-auto-flow: column;
            grid-gap: 3px;
        }

        #question{QID} .answer-container li {
            display: block;
            padding: 0;
            border: 1px solid #e7e7e7;
        }

        #question{QID} .answer-container li > div > div label {
            display: block;
            margin: 0 0 0.5em;
            width: 100%;
            text-align: center;
            padding: 0;
        }

        #question{QID} .answer-container li > div > div > div {
            width: 100%;
            text-align: center;
            padding: 0 !important;
            margin-top: 1.5em;
        }

        #question{QID} .answer-container .ls-slider-answer-row {
            margin: 0;
            width: 100%;
        }

        #question{QID} .answer-container .slider.slider-vertical {
            margin-bottom: 1em;
        }
    }
</style>

Sample survey:

File Attachment:

File Name: limesurvey...1375.lss
File Size:30.83 KB

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Please Log in to join the conversation.

rajkumar_dms
Offline
Elite Member

More

2 years 5 months ago #259813 by rajkumar_dms

Replied by rajkumar_dms on topic How to use Vertical Silder

Hi,
Can you move slider bottom to top but now it's top to bottom

Please Log in to join the conversation.

tpartner
Offline
LimeSurvey Community Team

More

2 years 5 months ago #259815 by tpartner

Replied by tpartner on topic How to use Vertical Silder

If you would read the manual...

- www.limesurvey.org/manual/Question_type_....28slider_reverse.29

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Please Log in to join the conversation.

Moderators: tpartner, holch

Powered by Kunena Forum

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans

Get started

Welcome to the LimeSurvey Community Forum

How to use Vertical Silder

Attachment not found

File Attachment:

File Attachment:

Lime-years ahead

Legal

About Us

Open Source