Dynamically update min and max values of input type range

Forums › Category: Code Help › Dynamically 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

0 Vote Up Vote Down

Rob 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 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?

0 Vote Up Vote Down

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

mid_val.png

Rob 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 LeVine replied 2 years ago

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

0 Vote Up Vote Down

Rob LeVine answered 2 years ago

Screenshot

Attachments

range_slider.png

0 Vote Up Vote Down

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>

0 Vote Up Vote Down

Emmanuel GADEK answered 2 years ago

If you prefer, I could send you the code by mail....

0 Vote Up Vote Down

Rob 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 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 LeVine replied 2 years ago

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

https://paste2.org/D2Gw0EWZ

0 Vote Up Vote Down

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 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 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" 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 !

0 Vote Up Vote Down

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 !

Latest Answers

Answer at Counting Comments
Answer at Conditional fields show on mobile
Answer at Inquiry About Generating Class Summary Report
Answer at Let user create custom survey and download as PDF (can Formidable do this?)
Answer at Conditional repeater email?

Categories

Questions

Other

Categories

Sort

Community Links

Formidable Links

Follow us!

Login

Dynamically update min and max values of input type range

Attachments

Attachments

Latest Answers

Popular Questions

Making the Best WordPress Plugin even better - Together

Categories

Questions

Other

Categories

Sort

Community Links

Formidable Links

Follow us!

Newsletter Signup

Dynamically update min and max values of input type range

Attachments

Attachments

Latest Answers

Popular Questions

Making the Best WordPress Plugin even better - Together