I have just an input tag with the following logic:

https://codepen.io/ion-ciorba/pen/MWVWpmR

I have a minimum value coming from the database(400 in this case), the logic is good but the user interaction with the component is really bad, the user can't input a value that is below 400, I want something else that won't block the user from typing, maybe some other type of interaction besides change and input. How can I make this interaction more user friendly, but still maintain the minimum value at 400.

Maybe a better solution for that:

if (numberInputValue == "" || parseInt(numberInputValue) < parseInt(min)) {
numberInputValue = min;
} else if (parseInt(numberInputValue) > parseInt(max)) {
numberInputValue = max;
}

CodePudding user response：

I agree with @Twisty the jQuery UI Slider would be better suited

$(function() {
  let slider = $(".tbi-slider")[0];
  let loanAmount = $(".tbi-calc-loanAmount");
  let totalLoanAmount = $(".tbi-calc-loanTotalAmount");
  var min = $(".tbi-slider").attr("min");
  var max = $(".tbi-slider").attr("max");
  $("#co-tbi-loanAmount-input").change(function(s) {
    var numberInputValue = s.target.value;
    if (numberInputValue.match(/^[0-9] $/) == null) {
      $("#co-tbi-loanAmount-input").val(min);
    }
    slider.value = parseInt(numberInputValue);
    if (parseInt(numberInputValue) < parseInt(min)) {
      $("#co-tbi-loanAmount-input").val(min);
    } else if (parseInt(numberInputValue) > parseInt(max)) {
      $("#co-tbi-loanAmount-input").val(max);
    }
    if (
      parseInt(numberInputValue) >= parseInt(min) &&
      parseInt(numberInputValue) <= parseInt(max)
    ) {
      $("#co-tbi-loanAmount-input").val(numberInputValue);
    }
    $("#tbi-range-slider").slider("value", $(this).val());
  });

  $("#tbi-range-slider").slider({
    min: 400,
    max: 1000,
    orientation: "horizontal",
    range: "min",

    slide: function(event, ui) {
      refreshSwatch(),
        $("#co-tbi-loanAmount-input").val(ui.value);
    },

  });
});

function refreshSwatch() {
  $("#tbi-range-slider").css("background-color", "#729fcf");
}

body {
  font-family: system-ui;
  background: #f06d06;
  color: white;
  text-align: center;
}

#tbi-range-slider {
  display: inline-block;
  width: 300px;
  margin: 15px;
  background-image: none;
}

#tbi-range-slider .ui-slider-range {
  background: #ef2929;
}

<input id="co-tbi-loanAmount-input"  value="400">


<div  id="tbi-range-slider" min="400" max="1000" value="500"></div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">

I hope this helps

CodePudding user response：

Consider the following.

$(function() {
  function checkValue(input) {
    // satantize for Numbers Only
    if (isNaN($(input).val())) {
      return false;
    }
    // cast to Integers
    var val = parseInt($(input).val());
    var min = parseInt($(input).data("min"));
    var max = parseInt($(input).data("max"));
    console.log(val, min, max, (val >= min) && (val <= max))
    // return val is in between Min & Max
    return (val >= min) && (val <= max);
  }

  //Init Min & Max on Text Input as Data Attributes
  $("#co-tbi-loanAmount-input").data({
    min: $("#tbi-range-slider").attr("min"),
    max: $("#tbi-range-slider").attr("max")
  });

  $('#co-tbi-loanAmount-input').change(function(s) {
    // ignore 1, and 10, will start to look at 100
    if ($(this).val().length >= 3) {
      if (!checkValue(this)) {
        console.log("Incorrect Value: "   $(this).val());
        $(this).val("");
      } else {
        var numberInputValue = Math.floor(parseInt($(this).val()) / 100) * 100;
        $(this).val(numberInputValue);
        var start = parseInt($("#tbi-range-slider").val()) - parseInt($("#tbi-range-slider").attr("min"));
        var diff = parseInt($("#tbi-range-slider").attr("max")) - parseInt($("#tbi-range-slider").attr("min"));
        console.log("linear-gradient(to right, #FF6600 0%, #FF6600 "   Math.round(start / diff * 100)   "%, #DEE2E6 "   Math.round(start / diff * 100)   "%, #DEE2E6 100%)");
        $("#tbi-range-slider").val(numberInputValue).parent().css("background", "linear-gradient(to right, #FF6600 0%, #FF6600 "   Math.round(start / diff * 100)   "%, #DEE2E6 "   Math.round(start / diff * 100)   "%, #DEE2E6 100%)");
      }
    }
  });

  $("#tbi-range-slider").change(function() {
    $('#co-tbi-loanAmount-input').val($(this).val()).trigger("change");
  })
});

body {
  font-family: system-ui;
  background: #f06d06;
  color: white;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="co-tbi-loanAmount-input"  value="25000">
<div>
  <input type="range" min="400" max="50000" value="25000" step="100"  id="tbi-range-slider">
</div>

This allows the User to enter a number (examples: 200, 400, 420, 10000) and will adjust the slider if it is greater than or equal to min and less than or equal to max of the Slider.

If the user enters a value of 200, it will remove the value. If the User enters an A or something else, it will also remove the value.

If the user enters 420, it will be dropped to 400.