Styling Slider input

  • Resolved beezpo

    (@beezpo)


    8 years, 12 months ago

    Hi,

    I’d like to style the color of the slider of the form I created (I would like the thumb to be green and the track to be grey). For some reasons, no styling works: I’ve associated the field with a specific class (.class-slider) and tried some styling like below but it doesn’t work:

    #fbuilder .class-slider input[type=range] {
    -webkit-appearance: none;}

    #fbuilder .class-slider::-webkit-slider-runnable-track {
    color: #676767;}

    #fbuilder .class-slider::-webkit-slider-thumb {
    background: #589442;}

    You can see a picture of the slider here: http://i.imgur.com/zyEUCJX.png

    Could you help me?
    Thank you!

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author codepeople

    (@codepeople)

    8 years, 12 months ago

    Hello @beezpo,

    You are not defining the correct classes, or css rules. Please, insert a “HTML Content” field in the form with the following piece of code as its content:

    <style>
#fbuilder .ui-slider-handle{background: #589442 !important;}
#fbuilder .slider{background: #676767 !important;}
</style>

    If you need customize the form’s appearance, I can offer you a custom coding service from my private website:

    http://cff.dwbooster.com/customization

    Best regards.

    Thread Starter beezpo

    (@beezpo)

    8 years, 12 months ago

    Thanks for your help!

    Just to be more precise, for the color of the track, this code worked:
    #fbuilder .ui-slider-range {
    background: #676767 !important;
    }

    Thanks again!

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Styling Slider input’ is closed to new replies.