SIGN UP

How to show the slider range value at the top center of the slider bar without adding a "After input"?

By: Steven M | Asked: 06/21/2023
Forums › Category: General questions › How to show the slider range value at the top center of the slider bar without adding a "After input"?
Vote Up 0 Vote Down
Steven MSteven M asked 2 years ago

Hi
Just finding my way around some of the field types and I am using a slider but I noticed that if you do not add anything in the "After Input " Advance option it places the range value always at the bottom.
I don't want to add a value after and want to show the range value above the slider bar and centered.
Is there a way of achieving this?
Thanks!

Attachments
slider.jpg
2 Answers
Vote Up 0 Vote Down
Best Answer
Steven MSteven M answered 2 years ago

If anyone else is looking for this solution.

  1. In the After field box, add " " (Note: Don't include the quotation marks. )
  2. Click on Update.
  3. To centre the Value: use custom CSS to select the field and centre to value. .frm_style_[nameofform] #frm_field_[ID]_container .frm_range_value { text-align: center; width:100%; }
Vote Up 0 Vote Down
Rob LeVineRob LeVine Staff answered 2 years ago

You could use jQuery to move the location of the span that holds the value

Steven MSteven M replied 2 years ago

What Span and what jQuery? In fact I am pretty sure there aren’t any Span tags 🤔

Victor Font Staff replied 2 years ago

View the HTML source in your browser's inspection tool. The value is in a span: <span class="frm_range_value">50</span>

Steven MSteven M replied 2 years ago

Ok great. But how do you use jquery to move the Value? I can see where it is but how do you move it?

Rob LeVineRob LeVine Staff replied 2 years ago

What is your expertise level with jQuery?

Steven MSteven M replied 2 years ago

Thanks, @Rob LeVine. I did find a simple workaround and added it in the thread for anyone else looking for the same solution

Making the Best WordPress Plugin even better - Together

Take on bigger projects with confidence knowing you have access to an entire community of Formidable Experts and Professionals who have your back when the going gets tough. You got this!
Join the community
crossarrow-right