Show value of range element in forms

[cvdw]

In the range element in forms I want to show the selected value next to or above or under the range bar. This value changing while moving the range bar. How can I show this value?

[prakash_s]

Hello @cvdw,

Thanks for writing to us.

By default, there are no options for that at the moment. I would suggest you please add the range field name as “budget” Add the Text element and add this custom ID to the text element for the range data output.

Add this custom JS code to the page’s JS box.

document.addEventListener('input', function (e) {
  if (e.target.matches('input[type="range"][name="budget"]')) {
    document.getElementById('range-value').textContent = e.target.value;
  }
});

The purpose of providing the custom JavaScript is to show you how to add JavaScript code to your site. Writing custom code is outside the scope of our theme support. If you need more customization, you need to learn JavaScript: https://www.w3schools.com/jquery/ or subscribe to One, where customizations are answered.

Hope it helps
Thanks