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

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.

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.