0

http://jsfiddle.net/c6f7ommh/1 - Saw the example with div containers, but want to know if its possible to resolve with input

 $(document).ready (function() {
    var minNumber = 0;
    var maxNumber = 100;

       $('.txtinput').on("change", function() {
        var inputVal = parseFloat($(this).val().replace(' %', ' ')) || 0
        if (minNumber > inputVal) {
          inputVal = 0;
        } else if (maxNumber < inputVal) {
          inputVal = 100;
        }
        $(this).val(inputVal + ' %'); 
      }); 
      });

That is what I've made for now, but I'm very new to programming, so if you can provide some tips on how to complete it, would be awsome!

  • 1
    You might want to tag this question with whatever language this refers to. What "example with divs" (whatever that means) are you referring to!? In what way does it not work? i.e. For a specified input what output do you expect, and what did you get instead? – Clifford Aug 21 '18 at 15:37
  • Added more description, thanks @Clifford – Dasha Tiunova Aug 21 '18 at 15:47
  • do you want the input field's width to stretch while typing ? Or an input with fixed width alongside with a `%` would suffice ? – ThS Aug 21 '18 at 15:54
  • The width of the input is fixed, only the "%" should move regardingly – Dasha Tiunova Aug 21 '18 at 16:05
  • [This answer](https://stackoverflow.com/a/50997861/5530965) makes use of Bootstrap 4 but I believe it's similar to what you want? Also the answer makes use of icons but you can easily replace it with your `%` as a plain text. – dokgu Aug 21 '18 at 16:16
  • [Here's another example](https://www.w3schools.com/howto/howto_css_form_icon.asp) that doesn't use Bootstrap. Again, it uses icons but you could tweak it to use plain text. – dokgu Aug 21 '18 at 16:21

0 Answers0