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
ForumsCategory: General questionsHow to show the slider range value at the top center of the slider bar without adding a "After input"?
Steven MSteven M asked 10 months 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
2 Answers
Best Answer
Steven MSteven M answered 10 months 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%; }
Rob LeVineRob LeVine answered 10 months ago
You could use jQuery to move the location of the span that holds the value
Steven MSteven M replied 10 months ago

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

Victor Font replied 10 months 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 10 months 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 replied 10 months ago

What is your expertise level with jQuery?

Steven MSteven M replied 10 months 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