Schieberegler für den Dynamikbereich und Eingabe

Question

Ich habe diesen Code, der zeigt, dass der Wert des Schiebereglers und einige einfache Mathematik und zeigt das Ergebnis.

Ich versuche, die value1, value2, value3 in einem Eingabefeld anzuzeigen. Wenn der Schieberegler geändert wird, sollte sich der Wert der Eingabe ändern. oder wenn die Eingabe geändert wird, ändert sich der Slider automatisch.

function updateTextInput() { 
 

 
    var value1 = document.getElementById("range").value; 
 
    document.getElementById('value1').innerHTML = "Roll Under: " + "<b>" + value1 + "</b>" + " "; 
 

 
    var value2 = (0.95/value1 * 100).toFixed(2); 
 
    document.getElementById('value2').innerHTML = "Multiplier: " + "<b>" + value2 + "</b>" + " "; 
 

 
    var value3 = (value2 * 10).toFixed(2); 
 
    document.getElementById('value3').innerHTML = "Profit: " + "<b>" + value3 + "</b>" + " "; 
 

 
}

<span id="value1">Roll Under: <b>47.5</b> </span><span id="value2">Multiplier: <b>2</b> </span><span id="value3">Profit: <b>20</b> </span> 
 

 

 
<!-- Should be replace with <input id="value1"><input id="value2"><input id="value3"> --> 
 

 
    <form> 
 
     <input id="range" type="range" min="0.01" step="0.01" max="94" value="47.5" oninput="updateTextInput(this.value);" > 
 
    </form>

Ich habe versucht, so etwas wie dieses <input id="value1input"><span id="value1">Roll Under: <b>47.5</b> </span> und document.getElementById('value1input').value=value1; zu ersetzen, aber wenn der Benutzer den Wert im Eingabe ändert sich der Schieber nicht entsprechend ändern.

Es sollte 3 Eingänge für value1, value2, value3 geben, und das Ändern eines beliebigen Eingangs sollte die anderen 2 Eingabewerte und den Schieberegler ändern.

Answer 1

hoffen, dass dies hilft Ihnen

function updateTextInput() { 
 

 
     var value1 = document.getElementById("range").value; 
 
     document.getElementById('value1').innerHTML = "Roll Under: " + "<b>" + value1 + "</b>" + " "; 
 
     document.getElementById('value1input').value = value1; 
 

 
     var value2 = (0.95/value1 * 100).toFixed(2); 
 
     document.getElementById('value2').innerHTML = "Multiplier: " + "<b>" + value2 + "</b>" + " "; 
 
     document.getElementById('value2input').value = value2; 
 

 
     var value3 = (value2 * 10).toFixed(2); 
 
     document.getElementById('value3').innerHTML = "Profit: " + "<b>" + value3 + "</b>" + " "; 
 
     document.getElementById('value3input').value = value3; 
 
    } 
 

 
    function changeTextInput(elemnt) { 
 
     var target_id = elemnt.id; 
 
     var rangeval = parseFloat(elemnt.value).toFixed(2); 
 
     rangeval = parseFloat(rangeval); 
 
     switch (target_id) { 
 
      case "value2input": 
 
       rangeval = (0.95/rangeval) * 100; 
 
       break; 
 
      case "value3input": 
 
       rangeval = (0.95/(rangeval/10)) * 100; 
 
       break; 
 
     } 
 
     document.getElementById('range').value = rangeval.toFixed(2); 
 
     updateTextInput(); 
 
    } 
 

 
    updateTextInput();

<span id="value1">Roll Under: <b>47.5</b> </span> 
 
<span id="value2">Multiplier: <b>2</b> </span> 
 
<span id="value3">Profit: <b>0.02</b> </span> 
 
<br><br> 
 
<input id="value1input" onchange="changeTextInput(this)"> 
 
<input id="value2input" onchange="changeTextInput(this)"> 
 
<input id="value3input" onchange="changeTextInput(this)"> 
 

 
<form> 
 
    <input id="range" type="range" min="0.01" step="0.01" max="94" value="47.5" oninput="updateTextInput(this.value);"> 
 
</form>

Answer 2

Hoffe, dass die folgenden Code und Code-Schnipsel Sie können

function updateTextInput() { 
 
    var value1 = document.getElementById("range").value; 
 
    document.getElementById('value1').innerHTML = "Roll Under: " + "<b>" + value1 + "</b>" + " "; 
 
    var value2 = (0.95/value1 * 100).toFixed(2); 
 
    document.getElementById('value2').innerHTML = "Multiplier: " + "<b>" + value2 + "</b>" + " "; 
 
    var value3 = (value2 * (document.getElementById("range").value)).toFixed(2); 
 
    document.getElementById('value3').innerHTML = "Profit: " + "<b>" + value3 + "</b>" + " "; 
 
} 
 

 
$('[data-input]').on('keyup',function(){ 
 
    var num=Number($(this).attr('data-input')); 
 
    // validate min max here, if false then use 
 
    // return false, so you can prevent invalid values 
 
    
 
    // clear other inputs except this, 
 
    $('[data-input]').not(this).val(''); 
 
    switch(num){ 
 
     case 1: 
 
      $('#value1 b').text(this.value); 
 
      $('#range').val(this.value); 
 
      break; 
 
     case 2: 
 
      $('#value2 b').text((0.95/this.value * 100).toFixed(2)); 
 
      $('#range').val((0.95/this.value * 100).toFixed(2)); 
 
      break; 
 
     case 3: 
 
      $('#value3 b').text(Number($('#value2 b').text())/Number(this.value)); 
 
      $('#range').val(Number($('#value2 b').text())/Number(this.value)); 
 
      break; 
 
    } 
 
    updateTextInput(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<span id="value1">Roll Under: <b>47.5</b> </span><span id="value2">Multiplier: <b>2</b> </span><span id="value3">Profit: <b>0.02</b> </span> 
 

 

 
<!-- Should be replace with <input id="value1"><input id="value2"><input id="value3"> --> 
 

 
<form> 
 
    <input id="range" type="range" min="0.01" step="0.01" max="94" value="47.5" oninput="updateTextInput(this.value);"> 
 
</form> 
 
<br/> 
 
Input 1 : <input id="value1input" data-input="1" /><br/> 
 
Input 2 : <input id="value2input" data-input="2" /><br/> 
 
Input 3 : <input id="value3input" data-input="3" /><br/>