Solo tengo una etiqueta de entrada con la siguiente lógica:
https://codepen.io/ion-ciorba/pen/MWVWpmR
Tengo un valor mínimo proveniente de la base de datos (400 en este caso), la lógica es buena pero la interacción del usuario con el componente es realmente mala, el usuario no puede ingresar un valor inferior a 400, quiero algo más que gane no impedir que el usuario escriba, tal vez algún otro tipo de interacción además del cambio y la entrada. ¿Cómo puedo hacer que esta interacción sea más fácil de usar, pero aún así mantener el valor mínimo en 400?
Tal vez una mejor solución para eso:
if (numberInputValue == "" || parseInt(numberInputValue) < parseInt(min)) { numberInputValue = min; } else if (parseInt(numberInputValue) > parseInt(max)) { numberInputValue = max; }Estoy de acuerdo con @Twisty, el jQuery UI Slider sería más adecuado
$(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" class="tbi-calc-loanAmount co-tbi-input tbi-font-18" value="400"> <div class="tbi-slider" 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">espero que esto ayude
Considera lo siguiente.
$(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" class="tbi-calc-loanAmount co-tbi-input tbi-font-18" value="25000"> <div> <input type="range" min="400" max="50000" value="25000" step="100" class="tbi-slider" id="tbi-range-slider"> </div> Esto le permite al usuario ingresar un número (ejemplos: 200 , 400 , 420 , 10000 ) y ajustará el control deslizante si es mayor o igual al min y menor o igual al max del control deslizante.
Si el usuario ingresa un valor de 200 , eliminará el valor. Si el usuario ingresa una A u otra cosa, también eliminará el valor.
Si el usuario ingresa 420 , se bajará a 400 .