is there a way to get min and max attribute in a lightning:input in js controller in aura component

Question

<lightning:input type="number" name="min_perc"  aura:id="required" required="true" class="label-text minPerc" min="0" max="99" value="{!v.min_perc}" messageWhenRangeOverflow="Value out of range" messageWhenRangeUnderflow="Value out of range"  autocomplete="off" onchange="{!c.onChangePerc}" onblur="{!c.checkValidity}" step="1"/>

<lightning:input type="number" name="max_perc"  aura:id="required" required="true" class="label-text maxPerc" value="{!v.max_perc}"  min = "0" max="99"  messageWhenRangeOverflow="Value out of range" messageWhenRangeUnderflow="Value out of range"   autocomplete="off" step="1" onblur="{!c.checkValidity}" onchange="{!c.onChangePerc}"/>

Hi I have this 2 lightning:input in aura component and I want to be able to change the min and max values in js controller, I've also tried setting them using a ternary operation like min = "{!v.min_perc ? v.min_perc + 1 : 0 }" but it doesn't seem to work I can't use aura:id since all the lightning:input have the same id that i use in another logic. I've also tried document.getElementsByClassname or something like var minOfMin = component.find('min_perc').get('v.min'); but again it doesn't work.

Any suggestions? Thanks

Answer 1

We can able to update the min and max properties of the Lightning input field, Try the below.

.cmp File:

<lightning:input type="number" name="min_perc"  aura:id="one-id"  onchange="{!c.onChangePerc}" min="2" max="998" value="0" required="true" class="label-text minPerc" 
 messageWhenRangeOverflow="Value out of range" messageWhenRangeUnderflow="Value out of range"  
                     autocomplete="off" />

controller.js:

({
onChangePerc : function(component, event, helper) {
    var myEle = component.find("one-id");
    console.log("Element:" +myEle);
    
    var myAttri = component.find("one-id").get("v.value");
    console.log("Value:"+ myAttri);
    
    var myAttriMin = component.find("one-id").get("v.min");
    console.log("Min:"+myAttriMin);       
    component.find("one-id").set("v.min", parseInt(myAttriMin)+1);
    myAttriMin = component.find("one-id").get("v.min");
    console.log("MinAfter:"+myAttriMin);       
    
    var myAttriMax = component.find("one-id").get("v.max");
    console.log("Mzx:"+myAttriMax);
    component.find("one-id").set("v.max", parseInt(myAttriMax)+1);
    myAttriMax = component.find("one-id").get("v.max");
    console.log("MaxAfter:"+myAttriMax);  
    

}

})

Inspector Screenshot: