How to increase arrows on a Range widget field?

  • Profile Image
    Asked on October 21, 2013 at 12:19 AM

    As the form that I have created will be used on a tablet. The spinner's arrows for increasing and decreasing are too small on a tablet. Is there any CSS or ways to adjust the height? As well as when for the "Range" survey tool. Thanks.

  • Profile Image
    Answered on October 21, 2013 at 03:04 AM

    Good day!

    Please check this form on your device: If both the Spinner and Range fields are good, then you can inject the following custom CSS codes:

    Get back to us if you need any further assistance.


  • Profile Image
    Answered on October 21, 2013 at 06:14 PM
    Hi Welvin,

    Overall, they appear too small on the tablet.

    Thank you and best regards,

    Elva Liew
    Training administration team leader
    Training, Education & Resources
    Australian Breastfeeding Association
    1818-1822 Malvern Road East Malvern, Victoria, 3145
    PH (03) 9885 0855 Fax (03) 9885 0866

    taxappeal2013-emailsig FINAL

    This email (including any attachments) may contain confidential or privileged information and is intended for the sole use of the person\s to whom it is addressed. If you are not the intended recipient, or the person responsible for delivering this message to the intended recipient please notify the sender or and delete all copies. Any unauthorised review, use, alteration, disclosure or distribution of this email by an unintended recipient is prohibited. The Australian Breastfeeding Association accepts no responsibility for the content of any email sent of a personal nature.

    Be nice to the world. Please don't print this e-mail unless you really need to!

  • Profile Image
    Answered on October 21, 2013 at 08:08 PM

    Hi Elva,

    You can adjust the height and width of the spinner up/down element in the CSS code provided by our colleague Welvin on this codes 



    Please try this and check in your device again.

    Inform us of the result.


  • Profile Image
    Answered on January 13, 2015 at 03:55 PM

    I used this code and it still doesn't look correct on my responsive form. Any ideas?

  • Profile Image
    Answered on January 13, 2015 at 05:34 PM

    It looks like that there is one more @media rule required for increasing the arrows.

    @media screen and (max-width: 768px) {
    .form-spinner-up, .form-spinner-down {
    height: 20px !important;
    width: 15px !important;
    padding-left: 9px !important;
    padding-right: 15px !important;

    We would like to suggest opening a new thread if you need any further assistance regarding the Range tool styling. We are trying to stick with one question per thread to be able to provide our users with better assistance.