| Summary | This article gives 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; control; design; askiadesign |
- To access to the live survey, click on the picture above.
- To download the qex file (inside the example directory), click here
- Version of the adc: 2.0.11
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 | Optional: 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' |
Under 'Labels', what does the option 'Use a selection list' does exactly?
Can there be different labels for the different statements in a Loop?
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
Does "Turn on DK for single choice question" use the "Allow DK" feature? So you will get a -99999 in the data?
Hi Maurice,
"Turn on DK for single choice question" use the last response in the list but not the allow don't know.
Best
Hi Jérôme,
It's not possible to add the DK button this way to a numeric slider, only single choice?
Regards
Yes right now it's only for single.
Best Regards
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" ?
Hi Jérôme,
Minor error in this page - the link "To download the qex file", points to the ADC-File instead.
Maurice
Oups fixed :)
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.
Hi Didier, on the qex file example, first screen you have a scale of 0 to 10.
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.
It's a closed question so you also need to delete the 0 response
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.
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
Hello , i am using the last version(1.1.16) , will try to download the qex file and try.
Best regards,
Didier.
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.
Hi Didier, Can you send an email to support@askia.com with a small qex file example. Thks in advance
Hello,
Done !
Regards,
Didier.
The version 205 has hard coded red and green gradient as slider background color. In slider settings we can change the selected color (so slider changes color after respondent selects a value), but the first colors are red and green. As we are not measuring something wrong or right would like to have the slider backgrould something more neutral and preferrably not a graident. Where can we change that.