Scroll

Slider

Slider

Follow
Summary This article give you access to the Slider adc 2.0 Javascript control. You also got access to a live example, qex file example and details of the parameters available for this control.
Applies to askiadesign
Written for Scriptwriters and survey authors
Keywords adc; adc2; javascript; jquery; control; design; askiadesign

  • To access to the live survey, click on the picture above.
  • To download the qex file, click here
  • To download the ADC control, click here
  • Version of the adc: 1.1.18

This control is compatible with a single and numerical question (response block) and loop single, loop numerical question.

Parameters Type Comments and/or possible value
     
Numeric Question    
Step for numberic Number  
     
Slider Settings    
Slider Orientation Boolean 'Horizontal, Vertical'
Slider Direction Boolean 'Left to right, Right to left'
Minimum value Number  
Intermediate value Number Optionnal: The intermediate value at the 50% position of the slider
Maximum value Number  
Slider Height (vertical layout) Number In Pixels
Show markers Boolean 'No, Yes'
     
Silder Base Styling    
Slider Base Height Number  
Slider Base Primary Colour Colour  
Slider Base Secondary Colour Colour  
Slider Base Gradient Direction Boolean 'Left to Right, Top to Bottom'
Slider Base Border Radius Number '0, 2, 5, 10, 15, 20, 25, 30'
Slider Base Border Colour Colour  
Slider Base Border Thickness Boolean 'None, 1px'
Slider Base Border Style Boolean 'None, Solid, Dashed, Dotted, Double'
Slider Selected Primary Colour Colour  
Slider Selected Secondary Colour Colour  
Slider Connect Boolean Yes, No
     
Slider Handle Styling    
Slider Handle Height Number  
Slider Handle Width Number  
Slider Handle Start Position Boolean 'Min, Half, Max'
Hide handle at start Boolean 'No, Yes'
Slider Handle Primary Colour Colour  
Slider Handle Secondary Colour Colour  
Slider Handle Border Colour Colour  
Slider Handle Border Radius Number '0, 2, 5, 10, 15, 20, 25, 30'
Slider Handle Border Thickness Boolean 'None, 1px'
Slider Handle Border Style Boolean 'None, Solid, Dashed, Dotted, Double'
Slider Handle Drop Shadow Boolean 'On, Off'
Slider Focus Primary Colour Colour  
Slider Focus Secondary Colour Colour  
Slider Focus Border Colour Colour  
Slider Focus Border Thickness Boolean 'None, 1px, 2px'
Show value on handle Boolean 'No, Yes'
Text to add on handle String  
Handle text position Boolean 'Left, Right'
Handle Font Colour Colour  
Use Handle Image Boolean 'No, Yes'
Handle Image Path String  
Handle Image Width String  
Handle Image Height String  
Hide Handle Background Boolean 'No, Yes'
     
Looped Questions    
Is in loop Boolean 'No, Yes'
Caption Alignment Boolean 'Left, Center, Right'
Caption Placement Boolean 'Left, Top, Right'
Caption Width Number  
Caption Padding String In Pixels
Image Alignment Boolean 'Left, Center, Right'
     
General    
Font Size Number In Pixels
Control Width Number In Percentage
Max Width Number In Pixels
Control Alignment Boolean 'Left, Center, Right'
Text Alignment Boolean 'Left, Center, Right'
     
Labels    
Label Placement Boolean 'Top, Side, Bottom'
Left Label Text Number  
Right Label Text Number  
Label Width Number In Pixels
Label Text Padding Number In Pixels
Label Text Line Height Number In Percentage
Display Label Text Boolean 'No, Yes'
Label Colour Primary Colour  
Label Colour Secondary Colour  
Label Font Colour Colour  
Label Border Radius Number '0, 2, 5, 10, 15, 20, 25, 30'
Label Border Colour Colour  
Label Border Thickness Number 'None, 1px, 2px, 3px, 4px, 5px'
Label Border Style Boolean 'None, Solid, Dashed, Dotted, Double'
Label Drop Shadow Boolean 'On, Off'
Use a selection list Boolean 'No, Yes'
     
Images    
Image Padding Number In Pixels
Max Image Width Number  
Max Image Height Number  
Force image size Boolean 'No, Force Width, Force Height, Force Both'
     
DK    
Turn on DK for single choice question Boolean 'No, Yes'
DK Position Boolean 'Left, Center, Right'
DK Text String  
DK Text Padding Number In Pixels
DK Margin String In Pixels
DK Color Primary Colour  
DK Color Secondary Colour  
DK Font Color Colour  
Border Radius Number '0, 2, 5, 10, 15, 20, 25, 30'
DK Border Color Colour  
DK Border Thickness Number 'None, 1px, 2px, 3px, 4px, 5px'
DK Border Style Boolean 'None, Solid, Dashed, Dotted, Double'
DK Drop Shadow Boolean 'On, Off'
Show DK Hover Color Boolean 'No, Yes'
DK Hover Color Primary Colour  
DK Hover Color Secondary Colour  
Show DK Hover Font Color Boolean 'No, Yes'
DK Hover Font Color Colour  
Show DK Hover Border Boolean 'No, Yes'
DK Hover Border Color Colour  
DK Hover Border Thickness Number 'None, 1px, 2px, 3px, 4px, 5px'
DK Hover Border Style Boolean 'None, Solid, Dashed, Dotted, Double'
Show DK Hover Shadow Boolean 'No, Yes'
DK Hover Drop Shadow Boolean 'On, Off'
slected DK Colour Primary Colour  
Selected DK Colour Secondary Colour  
Selected DK Font Colour Colour  
Selected DK Border Colour Colour  
Selected DK Border Thickness Boolean 'None, 1px, 2px, 3px, 4px, 5px'
DK Border Style Boolean 'None, Solid, Dashed, Dotted, Double'
Selected DK Drop Shadow Boolean 'On, Off'
Have more questions? Submit a request

Comments

  • Avatar
    MaximDeSmet

    Under 'Labels', what does the option 'Use a selection list' does exactly?
    Can there be different labels for the different statements in a Loop?

  • Avatar
    Jérôme Duparc

    Hi Maxim,

    Use a selection list is for the fall back if javascript is not active and for closed question so if yes then the fallback will show a drop down box if no then responses.

    Different labels: Yes you can use askiascript to do this.
    For more information/questions please use support@askia.com

  • Avatar
    Maurice Delaney

    Does "Turn on DK for single choice question" use the "Allow DK" feature? So you will get a -99999 in the data?

  • Avatar
    Jérôme Duparc

    Hi Maurice,

    "Turn on DK for single choice question" use the last response in the list but not the allow don't know.

    Best

  • Avatar
    Maurice Delaney

    Hi Jérôme,

    It's not possible to add the DK button this way to a numeric slider, only single choice?

    Regards

  • Avatar
    Jérôme Duparc

    Yes right now it's only for single.

    Best Regards

  • Avatar
    Yannick Chabert

    Bonjour Jérôme,
    L'option "Interconnection between sliders" est bluffante, c'est vraiment bien !
    Peut-on ajouter la possibilité de modifier le texte "Freeze this slider" ?

  • Avatar
    Maurice Delaney

    Hi Jérôme,

    Minor error in this page - the link "To download the qex file", points to the ADC-File instead.

    Maurice

  • Avatar
    Jérôme Duparc

    Oups fixed :)

  • Avatar
    Didier van Kesteren

    Hello, there is a bug , If a have a scale from 1 to 10 , it doesn't work !!! (you can't specify 1 as minimum value). If you specify 0 to 10 , it shows a scale from 0 to 9 !!

    Regards,

    Didier.

  • Avatar
    Jérôme Duparc

    Hi Didier, on the qex file example, first screen you have a scale of 0 to 10.

  • Avatar
    Didier van Kesteren

    Yep , from 0 to 10 ...but try to put minimum value at 1 and it bugs !! (and my question has values from 1 to 10)
    Regards,
    Didier.

  • Avatar
    Jérôme Duparc

    It's a closed question so you also need to delete the 0 response

  • Avatar
    Didier van Kesteren

    Hello again,

    Yes, this is what i did ..a closed question from 1 to 10 and minimum value in the adc set to 1 ..i get a javascript error !
    Regards,
    DIdier.

  • Avatar
    Jérôme Duparc

    Which version of the adc do you use ? You can download the qex file example from this page, delete the 0 response and in the properties of the adc set minimum to 1. The latest version is 1.1.16 and also can be downloaded from this page

  • Avatar
    Didier van Kesteren

    Hello , i am using the last version(1.1.16) , will try to download the qex file and try.

    Best regards,
    Didier.

  • Avatar
    Didier van Kesteren

    Hello, well, downloaded it and it works ..but when i copy paste the question in my qex, it doesn't work. It is strange, i get a javascript error.
    I have seen the source code of both pages and here is the difference (in "$('#adc_2').adcSlider({") :
    The one that works : "intermediateValue : 5.5,"
    Mine after just copying the question in my qex : "intermediateValue : 5,5,"

    Actually it comes from the intermediate values but why the hell are the values different ? (i have left the field blank in boh questionnaires)

    Best regards,
    Didier.

  • Avatar
    Jérôme Duparc

    Hi Didier, Can you send an email to support@askia.com with a small qex file example. Thks in advance

  • Avatar
    Didier van Kesteren

    Hello,

    Done !

    Regards,
    Didier.