CSS to edit Sliders with Calculated Result widget

  • Benflips
    Asked on August 21, 2017 at 3:57 AM

    Hi. I am experimenting with using a widget rather than a matrix for a section of my form (see screenshot below)

    I have put the data into my form, but I'm wondering if you can alter any characteristics of the widget - the colours of the text and various elements of the slider, the vertical height of each slider, also the size of the text, and the spacing between each slider?

    I have chosen this particular widget because of the multiple sliders in one widget - I have no need for the calculation function of this widget.

    I hope you can help, please advise! 

    CSS to edit Sliders with Calculated Result widget Image 1 Screenshot 20

  • Ashwin JotForm Support
    Replied on August 21, 2017 at 5:22 AM

    Hello Benflips,

    Yes it is possible to change the appearance of the "Slider with calculated result" widget by injecting the following custom css code:

    the colours of the text and various elements of the slider & also the size of the text:

    .label_row {

        color: #e15353 !important;

        font-size: 20px !important;

    }

    .value_row {

        color: #077907 !important;

        font-size: 20px !important;

    }

    .slider_row_platinum .slider-background, .slider_row_platinum_green .slider-background {

        background-color: #e80e0e !important;

        border-radius: 6px !important;

        border: 8px solid #545050 !important;

    }

     

    the vertical height of each slider & and the spacing between each slider:

    tr {

        height: 90px !important;

    }

     

     

    Please check the screenshot below on how to inject custom css code in widget:

    CSS to edit Sliders with Calculated Result widget Image 1 Screenshot 20

     

    Hope this helps.

    Do get back to us if you have any questions.

    Thank you!

  • Benflips
    Replied on August 23, 2017 at 2:16 AM

    Hi. I've used the code you've provided. Thanks.

    I reduced the height you gave me in the above code but it didn't seem to make any difference (see screenshot)

    I've experimented with reducing the border width but it stuffs up the alignment of the slider highlight that occurs if you make a selection beyond the 'zero' default (see screenshot).

    CSS to edit Sliders with Calculated Result widget Image 1 Screenshot 20

     

    Now, can I have code to:

    remove the grey background of the sliders?

    change colour of the slider circle (there is it's standard colour and also the color changes when you place the mouse over it. Can I have code for both please?)

    change colour of the slider highlight that occurs if you make a selection (currently it's a pale green)

     

     

  • Support_Management Jotform Support
    Replied on August 23, 2017 at 3:51 AM

    Legend:

    - Struck out lines should be removed. You pasted my colleague's reply and forgot to remove a line.

    - Lines highlighted in yellow are the previous/existing codes I saw on your widget.

    - Lines hihghlighted in green are the additional codes to achieve all those 3 things you mentioned.

    .label_row {

        color: #93298e !important;

        font-size: 15px !important;

    }

    .value_row {

        color: #5fb246 !important;

        font-size: 20px !important;

    }

    .slider_row_platinum .slider-background, .slider_row_platinum_green .slider-background {

        background-color: #93298e !important;

        border-radius: 6px !important;

        border: 4px solid #03699d !important;

    }

    the vertical height of each slider & and the spacing between each slider:

    tr {

        height: 5px !important;

    }

    .wrapper {

        background: none !Important;

        border: none !important;

    }

    .noUi-handle.noUi-handle-lower {

        border: 1px solid red !important;

        background: red !important;

    }

    .noUi-handle.noUi-handle-lower:hover {

        border: 1px solid blue !important;

        background: blue !important;

    }

    .slider_row_platinum_green .styleL {

        margin-top: -12px !important;

        margin-left: 4px !important;

        background: green !important;

    }

    Here's the breakdown:

    - remove the grey background of the sliders?

    .wrapper {

        background: none !Important;

        border: none !important;

    }

    - change colour of the slider circle (there is it's standard colour and also the color changes when you place the mouse over it. Can I have code for both please?)

    .noUi-handle.noUi-handle-lower {

        border: 1px solid red !important;

        background: red !important;

    }

    .noUi-handle.noUi-handle-lower:hover {

        border: 1px solid blue !important;

        background: blue !important;

    }

    - change colour of the slider highlight that occurs if you make a selection (currently it's a pale green)

    .slider_row_platinum_green .styleL {

        margin-top: -12px !important;

        margin-left: 4px !important;

        background: green !important;

    }

    As a preemptive measure, in case you'd ask a follow up question on how to align the slider, I added 2 lines of adjustments for the margins because if not, here's how it looks like:

    CSS to edit Sliders with Calculated Result widget Image 1 Screenshot 30

    With margin adjustments, here's how it would look like:

    CSS to edit Sliders with Calculated Result widget Image 2 Screenshot 41

    These 2 lines below took care of that by moving it a bit lower and towards the left:

    margin-top: -12px !important;

    margin-left: 4px !important;

    I used RED, GREEN and BLUE for the colors so just change them upon your discretion.

    Result: https://www.jotform.com/72342047490958 

    Hope these codes took care of everything you need. 😊 

  • Benflips
    Replied on August 24, 2017 at 2:43 AM
    Hi. Thank you, I've appended your suggested code.
    However, I've experimented with the code pixels that were supposed to
    change the spacing between each line - currently it's set to 10px, and it
    doesn't seem to make much if any difference.
    Can you help me reduce the whitespace between each option so I can reduce
    the overall vertical height of all of the options in the widget please?
    Also, is there a piece of code I can put in both the "label row" and "value
    row" sections to have them align better horizontally with the slider itself
    - currently they are slightly offset lower than the slider.
    *Regards,*
    *Dr. Ben Phillips*
    Chiropractor
    B.App.Sc.(Comp.Med.)(Chiro) M.Clin.Chiro.(RMIT)
    ...
  • Ashwin JotForm Support
    Replied on August 24, 2017 at 3:58 AM

    Hello,

    I did test the issue and I am able to replicate it. The height of the row does not seems to change. I will get back to you on this soon.

    Thank you!