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"?
0 Vote Up 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
0 Vote Up Vote Down
Best Answer
Steven MSteven M answered 1 year 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%; }
0 Vote Up Vote Down
Rob LeVineRob LeVine 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 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 replied 2 years ago

What is your expertise level with jQuery?

Steven MSteven M replied 1 year 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