TOPIC:

Is there a way to add a range field? 8 months 2 weeks ago #238313

  • uglyeoin's Avatar Topic Author
  • uglyeoin
  • Offline
  • Expert Breezer
  • Expert Breezer
  • Posts: 288
  • Karma: 5
  • Thanks: 3
I don't believe there is a range field

developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range
<div>
  <input type="range" id="start" name="volume"
         min="0" max="11">
  <label for="volume">Volume</label>
</div>

Is there a simple way to add one? If so I can share it once I've done it. If not do you have a suggestion instead?

Please Log in or Create an account to join the conversation.

Is there a way to add a range field? 8 months 1 week ago #238326

  • Eddy.vh's Avatar
  • Eddy.vh
  • Away
  • Gold Breezer
  • Gold Breezer
  • Posts: 357
  • Karma: 3
  • Thanks: 59
Hello.

I did a tutorial a few months ago (in June).
It is in French but a good translator should help you understand.

www.breezingforms.eddy-vh.com/personnali...de-type-range-slider

Regards,
Eddy

Please Log in or Create an account to join the conversation.

Is there a way to add a range field? 8 months 1 week ago #238329

  • uglyeoin's Avatar Topic Author
  • uglyeoin
  • Offline
  • Expert Breezer
  • Expert Breezer
  • Posts: 288
  • Karma: 5
  • Thanks: 3
Legend thanks! I'll create a package file and upload it here when I'm done.

Please Log in or Create an account to join the conversation.

Is there a way to add a range field? 8 months 1 week ago #238336

  • uglyeoin's Avatar Topic Author
  • uglyeoin
  • Offline
  • Expert Breezer
  • Expert Breezer
  • Posts: 288
  • Karma: 5
  • Thanks: 3
This was my final code which I put in:

form pieces > before form > custom
$document->addScriptDeclaration('
function onRangeChange() { 
  document.getElementById("ff_elem387").addEventListener("change", (event) => {
  document.getElementById("ff_elem396").value = document.getElementById("ff_elem387").value;
  });
  document.getElementById("ff_elem413").addEventListener("change", (event) => {
  document.getElementById("ff_elem414").value = document.getElementById("ff_elem413").value;
});
}

function ready(fn) {
  if (document.readyState != "loading") {
    fn();
  } else if (document.addEventListener) {
    document.addEventListener("DOMContentLoaded", fn);
  } else {
    document.attachEvent("onreadystatechange", function() {
      if (document.readyState != "loading")
        fn();
    });
  }
}

window.ready(function() {
    document.getElementById("ff_elem387").type = "range";
  document.getElementById("ff_elem413").type = "range";
    onRangeChange();
});
');

for anyone reading:

I had two range fields. Both created as "number" type fields. I used the advanced tab to set min, max and step values. In my code they are

ff_elem387
and
ff_elem413

You will need to update these with your own numbers.

Then I created two text inputs next to them, made them read only and set a placeholder (in my case "£x" and "x month's").

These fields are called:
ff_elem414
and
ff_elem396

You need to change them to the correct numbers in your code. You should also turn off the labels for those fields and you can also disable logging for those fields (as you already have it in the fields above).

Eddy also supplied this awesome link to style your range sliders: www.cssportal.com/style-input-range/

Hope that helps

Please Log in or Create an account to join the conversation.

Is there a way to add a range field? 8 months 1 week ago #238340

  • mihaela
  • Offline
  • Developer
  • Developer
  • Posts: 3128
  • Karma: 105
  • Thanks: 413
Hello,

Thank you for sharing this with the community both Eddy and "uglyeoin".

I am glad that you have managed to set this for your form.

Best regards,

Mihaela

Please Log in or Create an account to join the conversation.

  • Page:
  • 1
Moderators: ForumSupport
Time to create page: 0.051 seconds

Summer Sale!

Massive discounts on all subscriptions!

Get Your Subscription Here

Quick Links

Downloads

BreezingForms

ContentBuilder

BreezingCommerce

Templates

Documentation

BreezingForms

ContentBuilder

BreezingCommerce

Apprendre BreezingForms (French Community)

Apprendre et maîtriser BreezingForms par des tutoriels et exemples, le tout en français

breezingforms.eddy-vh.com

Questions et réponses sur les forums de l'AFUJ

AFUJ

Special Offer

Summer Sale! All subscriptions at a special price!

Includes prio support, all of our current and future Joomla!® extensions and Joomla!® templates for the duration of your membership.

Get it from here

3rd Party Discount - 25% Off

We help you to keep your costs under control. If you are a new member and purchased a form building tool from a different form vendor, then you'll get a 25% discount on our subscription plans.

How to receive the discount:

Send us a quick email to sales@crosstec.org with a proof of purchase (for example a paypal receipt), await payment instructions and enjoy your membership!