Is there a way to add a range field?

  • uglyeoin
  • uglyeoin's Avatar Topic Author
  • Offline
  • Gold Boarder
  • Gold Boarder
  • Posts: 282
  • Karma: 5
  • Thank you received: 3

uglyeoin created the topic: Is there a way to add a range field?

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?
#238313
  • Posts: 267
  • Karma: 1
  • Thank you received: 31

Eddy.vh replied the topic: Is there a way to add a range field?

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
#238326
  • uglyeoin
  • uglyeoin's Avatar Topic Author
  • Offline
  • Gold Boarder
  • Gold Boarder
  • Posts: 282
  • Karma: 5
  • Thank you received: 3

uglyeoin replied the topic: Is there a way to add a range field?

Legend thanks! I'll create a package file and upload it here when I'm done.
#238329
  • uglyeoin
  • uglyeoin's Avatar Topic Author
  • Offline
  • Gold Boarder
  • Gold Boarder
  • Posts: 282
  • Karma: 5
  • Thank you received: 3

uglyeoin replied the topic: Is there a way to add a range field?

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
#238336
  • mihaela
  • Away
  • Administrator
  • Administrator
  • Posts: 2738
  • Karma: 93
  • Thank you received: 369

mihaela replied the topic: Is there a way to add a range field?

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
#238340
Moderators: ForumSupporttomeperica
Time to create page: 0.069 seconds

New Icon Packs Category!

Crosstec is now offering icon packs.

If you are a paying subscriber, icon packs are automatically added to your account.

Check out our icon packs page!

Live Support Chat Opened!

Join our Discord chat here to receive live support and talk directly to the team!

Summer Sale!

50% discount on all of our extension subscription plans, templates and icon packs!

Get Your Subscription Here

News and Updates

Get informed about new downloads, updates and more in our News and Updates newsletter.

All Extensions Subscription

Get 1 year access to all of our current and future products and 1 year of professional support -- 99 for just 49! (Summer Sale)

No support per domain or website installation limits! Includes all of our current and future Joomla!® extensions, Joomla!® templates for the duration of your membership. This means, by purchasing an All Extensions Subscription you'll have it all covered!

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!

Live Support Chat Opened!

Join our Discord chat here to receive live support and talk directly to the team!

Community Reward

Help us to create new extensions and plugins! With only $5 you help us a lot and get unlimited download access to all of our products, professional support and even more. Get your reward now!

Read More Here