CSS to edit Sliders with Calculated Result widget

  • Profile Image
    Benflips
    Asked on August 21, 2017 at 03: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! 

  • Profile Image
    ashwin_d
    Answered on August 21, 2017 at 05: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:

     

    Hope this helps.

    Do get back to us if you have any questions.

    Thank you!

  • Profile Image
    Benflips
    Answered on August 23, 2017 at 02: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).

     

    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)

     

     

  • Profile Image
    Jim_R
    Answered on August 23, 2017 at 03: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:

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

    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. 😊 

  • Profile Image
    Benflips
    Answered on August 24, 2017 at 02: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)
    ...
  • Profile Image
    ashwin_d
    Answered on August 24, 2017 at 03: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!