Dynamically update min and max values of input type range

By: Emmanuel GADEK | Asked: 02/09/2023
ForumsCategory: Code HelpDynamically update min and max values of input type range
Emmanuel GADEK asked 2 years ago
Hi guys,

all the question is on the title.... :-)
Is it possible to dynamically update min and max values of an iput type range (from a choice made on a radio button, for exemple.... if radio button choiced value is 1 : min value is 0 and max value is 250, if radio button choiced value is 2 : min value is 100 and max value is 500).

Best regards !
8 Answers
Rob LeVineRob LeVine answered 2 years ago
This is really easy in jQuery. On the change of the radio button, you get the option that was selected and then do something like this: $('#myField').attr('max', '250');
Emmanuel GADEK replied 2 years ago

Hi @Rob LeVine, thank you for answer.
It seems to be work. But what about the mid value (cursor on the input type range) ?...and what about dynamic update of the displayed values ?

Rob LeVineRob LeVine replied 2 years ago

I don't understand what you're referring to about mid value. The update of displayed values is also easy in jQuery. Can you provide a link to the page with the issue?

Victor Font replied 2 years ago

Let me see if I understand what you're asking Rob about mid-values.

Formidable's range field is a standard HTML form element. It's no different technically than any other range input field regardless of the build source. There are 4 properties you can easily manipulate in code, the field value, and the min, max, and step properties. Rob's example for the max property is correct for min and step properties as well.

Formidable's method for displaying the actual value of the field as the range sliders are adjusted is to display a separate text string wrapped in HTML span tags. This is not part of the actual input field. I'm assuming this is what you're calling the mid-values. Because this element is not an actual part of the field, but rather a different HTML element, Formidable uses jQuery to update the display of the value as the value changes for the input. The mid-value display is a programmatic update that triggers instantaneously when the slider value changes in response to handles movement. If you are changing the input properties dynamically, you have to also trigger the input field's change event so Formidable can do the rest. You can find out more about that here: https://api.jquery.com/trigger/.

What happens though, if you change the input properties and the field's current value is out of range? It will probably trigger an error. How will you handle it?

Emmanuel GADEK answered 2 years ago
@Rob LeVine : Not really....because the website is on development actually. 
But I attached a pic below (the 503 value).

Attachments
Rob LeVineRob LeVine replied 2 years ago

Any value on the screen (or hidden in the HTML) can be changed. In the attached screenshot you can see that all the values of the slider are available, min, max. step and the "frm_range_value"

Rob LeVineRob LeVine replied 2 years ago

Ugh, why won't it let me attach the file? I'll put it in as an "answer"

Rob LeVineRob LeVine answered 2 years ago
Screenshot
Attachments
Emmanuel GADEK answered 2 years ago

@Rob LeVine Here is my code... but it\'s very hard to undestand without the exemple.
You could find what about I talked betwwen lines num 49 and 57.
If you have a static ip adress I temporarily could open you an access to the website under dev.

--------------------------------------------- CODE ------------------------------------------------<script> jQuery(document).ready(function ($) { // on va checker la largeur de la page pour savoir dans quelle row du Divi Builder récupérer la valeur des champs var WinWidth = window.innerWidth; if (WinWidth > 980) { diviRowVal = ".et_pb_row_2 "; } else { diviRowVal = ".et_pb_row_60 "; } //console.log("valeur de diviRowVal : "+diviRowVal); // On initialise les variables en allant récupérer les valeurs initiales des champs var detectioncode = $(diviRowVal+"select[name='item_meta[58]']").val(); // console.log("detectioncode OK : "+detectioncode); var nez = $(diviRowVal+"input[name='item_meta[78]']:checked").val(); var fond = $(diviRowVal+"input[name='item_meta[79]']:checked").val(); var alesage = $(diviRowVal+"select[name='item_meta[80]']").val(); var course = $(diviRowVal+"input[name='item_meta[60]']").val(); var doubleeffet = $(diviRowVal+"input[name='item_meta[86][]']:checked").val(); if (doubleeffet =="Oui" ) { doubleeffet = "D"; } else { doubleeffet = $(diviRowVal+"select[name='item_meta[62]']").val(); } var joints = $(diviRowVal+"input[name='item_meta[87]']:checked").val(); var tigetraversante = $(diviRowVal+"input[name='item_meta[63]']:checked").val(); var options = $(diviRowVal+"input[name='item_meta[89]']:checked").val(); var vdimadalert = $(diviRowVal+" .alert"); var refBegin = $(diviRowVal+"input[name='item_meta[78]']:checked").val()+$(diviRowVal+"input[name='item_meta[79]']:checked").val(); console.log(refBegin); if (refBegin == "AD") { vdimadalert.css({"margin-bottom":"20px", "display":"initial"}); } else { vdimadalert.css({"margin-bottom":"0", "display":"none"}); } //console.log("valeur de la chaîne myCustomRef : "+diviRowVal+".VDIRefcustom"); document.querySelector(diviRowVal+".VDIRefcustom").innerHTML = "VDI-"+detectioncode+"-"+nez+"-"+fond+"-"+alesage+"-"+course+"-"+doubleeffet+"-"+joints+"-"+tigetraversante+"-"+options; $(diviRowVal+"input[name='item_meta[97]']").val("VDI-"+detectioncode+"-"+nez+"-"+fond+"-"+alesage+"-"+course+"-"+doubleeffet+"-"+joints+"-"+tigetraversante+"-"+options); // OnChange sur un des éléments du formulaire // $(diviRowVal+"select[name="item_meta[58]"]", diviRowVal+'input[name="item_meta[78]"]', diviRowVal+'input[name="item_meta[79]"]', diviRowVal+'select[name="item_meta[80]"]', diviRowVal+'input[name="item_meta[60]"]', diviRowVal+'input[name="item_meta[86][]"]', diviRowVal+'select[name="item_meta[62]"]', diviRowVal+'input[name="item_meta[87]"]', diviRowVal+'input[name="item_meta[63]"]', diviRowVal+'input[name="item_meta[89]"]').change(function () { $(diviRowVal+"select[name='item_meta[58]']").add(diviRowVal+"input[name='item_meta[78]']").add(diviRowVal+"input[name='item_meta[79]']").add(diviRowVal+"select[name='item_meta[80]']").add(diviRowVal+"input[name='item_meta[60]']").add(diviRowVal+"input[name='item_meta[86][]']").add(diviRowVal+"select[name='item_meta[62]']").add(diviRowVal+"input[name='item_meta[87]']").add(diviRowVal+"input[name='item_meta[63]']").add(diviRowVal+"input[name='item_meta[89]']").change(function () { var detectioncode = $(diviRowVal+"select[name='item_meta[58]']").val(); var nez = $(diviRowVal+"input[name='item_meta[78]']:checked").val(); var fond = $(diviRowVal+"input[name='item_meta[79]']:checked").val(); var alesage = $(diviRowVal+"select[name='item_meta[80]']").val(); var course = $(diviRowVal+"input[name='item_meta[60]']").val(); var courseSlider = $(diviRowVal+" #field_w8kbs2"); var courseSliderMid = $(diviRowVal+" #field_w8kbs2 .frm_range_value"); var doubleeffet = $(diviRowVal+"input[name='item_meta[86][]']:checked").val(); if (doubleeffet =="Oui" ) { doubleeffet = "D"; $(courseSlider).attr({"min":"0","max":"3000"}); $(courseSliderMid).innerHTML = "1500"; } else { doubleeffet = $(diviRowVal+"select[name='item_meta[62]']").val(); $(courseSlider).attr({"min":"0","max":"50"}); $(courseSliderMid).innerHTML = "25"; } var joints = $(diviRowVal+"input[name='item_meta[87]']:checked").val(); var tigetraversante = $(diviRowVal+"input[name='item_meta[63]']:checked").val(); var options = $(diviRowVal+"input[name='item_meta[89]']:checked").val(); var vdimadalert = $(diviRowVal+" .alert"); var refBegin = $(diviRowVal+"input[name='item_meta[78]']:checked").val()+$(diviRowVal+"input[name='item_meta[79]']:checked").val(); document.querySelector(diviRowVal + ".VDIRefcustom").innerHTML = "VDI-"+detectioncode+"-"+nez+"-"+fond+"-"+alesage+"-"+course+"-"+doubleeffet+"-"+joints+"-"+tigetraversante+"-"+options; $(diviRowVal+"input[name='item_meta[97]']").val("VDI-"+detectioncode+"-"+nez+"-"+fond+"-"+alesage+"-"+course+"-"+doubleeffet+"-"+joints+"-"+tigetraversante+"-"+options); //console.log(refBegin); // test si reference type VDI-M-A-D if (refBegin == "AD") { vdimadalert.css({"margin-bottom":"20px", "display":"initial"}); } else { vdimadalert.css({"margin-bottom":"0", "display":"none"}); } }); }); </script>

Emmanuel GADEK answered 2 years ago
If you prefer, I could send you the code by mail....
Rob LeVineRob LeVine answered 2 years ago
I highly recommend you user /* */ for comments rather than // when coding Javascript or jQuery because when minify or prettify the code, like I tried to do, you get errors all over the place with //. If you want to change the value of the number in the middle of the slider you need, as Victor referred to, get the span. So something like this will work $("#frm_field_475_container").find("span.frm_range_value").html("75"); where you replace 475 with the div of your slider. However, and it's a big however, that won't move the slider, it'll just change the number. I have no idea how to programmatically move the slider. I'm sure there's a way, but I don't know what it is. Here's your code, prettied up: jQuery(document).ready(function($) { var WinWidth = window.innerWidth; if (WinWidth > 980) { diviRowVal = ".et_pb_row_2 "; } else { diviRowVal = ".et_pb_row_60 "; } var detectioncode = $(diviRowVal + "select[name='item_meta[58]']").val(); var nez = $(diviRowVal + "input[name='item_meta[78]']:checked").val(); var fond = $(diviRowVal + "input[name='item_meta[79]']:checked").val(); var alesage = $(diviRowVal + "select[name='item_meta[80]']").val(); var course = $(diviRowVal + "input[name='item_meta[60]']").val(); var doubleeffet = $(diviRowVal + "input[name='item_meta[86][]']:checked").val(); if (doubleeffet == "Oui") { doubleeffet = "D"; } else { doubleeffet = $(diviRowVal + "select[name='item_meta[62]']").val(); } var joints = $(diviRowVal + "input[name='item_meta[87]']:checked").val(); var tigetraversante = $(diviRowVal + "input[name='item_meta[63]']:checked").val(); var options = $(diviRowVal + "input[name='item_meta[89]']:checked").val(); var vdimadalert = $(diviRowVal + " .alert"); var refBegin = $(diviRowVal + "input[name='item_meta[78]']:checked").val() + $(diviRowVal + "input[name='item_meta[79]']:checked").val(); console.log(refBegin); if (refBegin == "AD") { vdimadalert.css({ "margin-bottom": "20px", "display": "initial" }); } else { vdimadalert.css({ "margin-bottom": "0", "display": "none" }); } document.querySelector(diviRowVal + ".VDIRefcustom").innerHTML = "VDI-" + detectioncode + "-" + nez + "-" + fond + "-" + alesage + "-" + course + "-" + doubleeffet + "-" + joints + "-" + tigetraversante + "-" + options; $(diviRowVal + "input[name='item_meta[97]']").val("VDI-" + detectioncode + "-" + nez + "-" + fond + "-" + alesage + "-" + course + "-" + doubleeffet + "-" + joints + "-" + tigetraversante + "-" + options); $(diviRowVal + "select[name=" item_meta[58] "]", diviRowVal + 'input[name="item_meta[78]"]', diviRowVal + 'input[name="item_meta[79]"]', diviRowVal + 'select[name="item_meta[80]"]', diviRowVal + 'input[name="item_meta[60]"]', diviRowVal + 'input[name="item_meta[86][]"]', diviRowVal + 'select[name="item_meta[62]"]', diviRowVal + 'input[name="item_meta[87]"]', diviRowVal + 'input[name="item_meta[63]"]', diviRowVal + 'input[name="item_meta[89]"]').change(function() { $(diviRowVal + "select[name='item_meta[58]']").add(diviRowVal + "input[name='item_meta[78]']").add(diviRowVal + "input[name='item_meta[79]']").add(diviRowVal + "select[name='item_meta[80]']").add(diviRowVal + "input[name='item_meta[60]']").add(diviRowVal + "input[name='item_meta[86][]']").add(diviRowVal + "select[name='item_meta[62]']").add(diviRowVal + "input[name='item_meta[87]']").add(diviRowVal + "input[name='item_meta[63]']").add(diviRowVal + "input[name='item_meta[89]']").change(function() { var detectioncode = $(diviRowVal + "select[name='item_meta[58]']").val(); var nez = $(diviRowVal + "input[name='item_meta[78]']:checked").val(); var fond = $(diviRowVal + "input[name='item_meta[79]']:checked").val(); var alesage = $(diviRowVal + "select[name='item_meta[80]']").val(); var course = $(diviRowVal + "input[name='item_meta[60]']").val(); var courseSlider = $(diviRowVal + " #field_w8kbs2"); var courseSliderMid = $(diviRowVal + " #field_w8kbs2 .frm_range_value"); var doubleeffet = $(diviRowVal + "input[name='item_meta[86][]']:checked").val(); if (doubleeffet == "Oui") { doubleeffet = "D"; $(courseSlider).attr({ "min": "0", "max": "3000" }); $(courseSliderMid).innerHTML = "1500"; } else { doubleeffet = $(diviRowVal + "select[name='item_meta[62]']").val(); $(courseSlider).attr({ "min": "0", "max": "50" }); $(courseSliderMid).innerHTML = "25"; } var joints = $(diviRowVal + "input[name='item_meta[87]']:checked").val(); var tigetraversante = $(diviRowVal + "input[name='item_meta[63]']:checked").val(); var options = $(diviRowVal + "input[name='item_meta[89]']:checked").val(); var vdimadalert = $(diviRowVal + " .alert"); var refBegin = $(diviRowVal + "input[name='item_meta[78]']:checked").val() + $(diviRowVal + "input[name='item_meta[79]']:checked").val(); document.querySelector(diviRowVal + ".VDIRefcustom").innerHTML = "VDI-" + detectioncode + "-" + nez + "-" + fond + "-" + alesage + "-" + course + "-" + doubleeffet + "-" + joints + "-" + tigetraversante + "-" + options; $(diviRowVal + "input[name='item_meta[97]']").val("VDI-" + detectioncode + "-" + nez + "-" + fond + "-" + alesage + "-" + course + "-" + doubleeffet + "-" + joints + "-" + tigetraversante + "-" + options); if (refBegin == "AD") { vdimadalert.css({ "margin-bottom": "20px", "display": "initial" }); } else { vdimadalert.css({ "margin-bottom": "0", "display": "none" }); } }); });
Rob LeVineRob LeVine replied 2 years ago

Ugh, I hate this forum sometimes. It was pretty when I pasted it.

Victor Font replied 2 years ago

<p>Best to use pastebin or gist for posting large pieces of code.</p>

Rob LeVineRob LeVine replied 2 years ago

Hey, I'm up to 10% of the times I remember to do that...

https://paste2.org/D2Gw0EWZ

Emmanuel GADEK answered 2 years ago
Hi @Rob LeVine, I'm right with you. I has used tricks that Victor and you  give to me. Everything works fine but I has the problem that you called about in your previous post. I succedded to update min, max values and middle value in the span element, but the cursor position doesn't want to reset its position.  Maybe an idea on this GitHub repo : https://github.com/acdvorak/jquery.caret/blob/master/README.md
Rob LeVineRob LeVine replied 2 years ago

It turns out it's really easy. jQuery("#field_tw77r").val(75) where "tw77r" is the field key for the range element (input type="range")

Victor Font replied 2 years ago

This single line of jQuery changes the min, max, value, and changes the cursor position.

jQuery("#field_9qq2q").attr("min", 200).attr("max", 500).val(300).trigger('click') ;

The last command, .trigger('click') , changes the cursor position.

Rob LeVineRob LeVine replied 2 years ago

10 points to Victor for putting it all in one command. I was too busy thinking about each piece.

Emmanuel GADEK replied 2 years ago

<p>@Rob Le Vine and @Victor Font,<br />the command line posted by Victor works fine but it's a little bit more complicated in my case.<br />Slider update (update by a choice on a radio button) is in include on an 'on change' event (where all the elements of the form are listened to update in real time an html field with a product reference, a reference builder in fact).<br />The slider is 'listened to' too. With this command, any change in the slider update min, max values but especially cursor pos.....It systematically return to the middle when you release.<br />Here is my code : <a href="https://paste2.org/Amsg1Bxj<br&quot; rel="nofollow">https://paste2.org/Amsg1Bxj</a><br />The onChange listener begin on line number 36.Code posted by Victor begin on line number 46.</p>

Emmanuel GADEK replied 2 years ago

I finally found a middle solution....
I make a test on the activeElement id.
If the active element is another field than the the input type range, I update it and if it's not, I don't update it.
Probably not the best and conventionalest solution but it's work !

Emmanuel GADEK answered 2 years ago
After being testin my code on multiple device,  I could saw that get the element id of the 'active element' with :  var activeElement = document.activeElement.id doesn't work. If somebody have an idea to get the id of an input type range on mobile device, I take the idea !

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