How to move the number value of a slider using css?

  • Profile Image
    GaryCaprice
    Asked on January 15, 2018 at 07:15 AM

    Hi, I'd like to use the numeric slider for a simple inventory form, to be used on mobile devices.

    https://form.myjotform.com/80122321236542

    My problem is that on mobile devices, using both "styles" available, your finger hides the number on the slider, thus making sliding to an exact number tricky.

    Can you assist with CSS code that would move the number above the slider, and perhaps double the font size?

    Hiding the number under your finger isn't great mobile UI to be honest.

  • Profile Image
    Richie_P
    Answered on January 15, 2018 at 11:08 AM

    Unfortunately, the margins of the slider won't let us move the value above. Instead, I have adjusted it to move to the right using this custom css code.


    Try adding this custom css to your widget css.

    @media screen and (max-width: 480px) {

    .bfh-slider>.bfh-slider-handle>.bfh-slider-value {

    margin-top:35px!important;
    margin-left:130px!important;
    position:fixed;
    }

    }
     

    Hope you find this information useful.

    Let us know how it goes.