What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    How do i inject CSS in Sliders with calculated result

    Asked by dave_myinfinite on August 10, 2016 at 09:16 PM

    https://form.jotform.com/62226782199162

    I am able to inject code in the CSS tab, but I don't know what to put in this tab.

    I want to

    1) Move the labels to the top

    2) Increase the width of the slider

    3) Change the slider color to green

    4) Decrease spacing between the rows (I  found this example, but nothing happened on my form)

    Page URL:
    https://form.jotform.com/62226782199162

    Screenshot
    inject CSS in calculated result how
  • Profile Image
    JotForm Support

    Answered by Nik_C on August 11, 2016 at 03:04 AM

    You will have to inject the following CSS code to your slider with calculated result widget:

    .label_row {

        width: 100%;

        position: relative;

        float: left;

    }

    .slider_row_ {

        float: left;

    }

    .value_row {

        display: inline-block;

        top: 8px;

        position: relative;

    }

    div.slider.slider.ui-slider.ui-slider-horizontal > a.ui-slider-handle {

        background-color: green;

        background-image: none;

    }

    td > div.wrapper {

        background-color: #00ff00;

    }

    div.slider.slider.ui-slider.ui-slider-horizontal {

        background-color: #ccff99;

        background-image: none;

    }

    .wrapper{

    border:3px solid red;

    }

    The green code I have provided will move the label to the top.

    The code with orange background changes the slider control color:

    The Blue code changes the following properties on the slider:

    Light green code changes the color of the slider background:

    The Purple part of the code will change the border color to red:

     

    I have created this CSS code for all the properties in the slider. You can use the code separately so you can design the slider to your liking.

    To find out where to inject the code to the widget please follow this guide:

     

    Let us know if you need more information.

     

  • Profile Image
    JotForm Support

    Answered by Nik_C on August 11, 2016 at 03:46 AM

    You can change the width of widget by going to widget preferences:

    You need to change the width property, I have changed the value from 400px to 800px in this example.

    I will provide an answer for the way how you can decrease the spacing for the slider calculation widget shortly. 

    Thank you for your patience.

  • Profile Image
    JotForm Support

    Answered by Nik_C on August 11, 2016 at 03:55 AM

    You can change the spacing between the slider widgets by changing the height of the widget. You can use the guide I have provided in the previous answer and just change the height accordingly.

    Let us know if you need any information.