100K後のfloatでのJQuery範囲スライダ値の変更

Question

100K後のfloatのJQuery範囲スライダ値を1.0M（Million）に変更したいとします。私のシナリオでは

、

 Min Value: 40K 
     Max Value: 4M (4 Million) 

100Kにスライダーを移動した後、私は1.0M（100万）に100Kを変更すると、それは1.0M、1.1M、1.2Mのようになります。.. 4.0M。

正確に私が探しているものを理解するための例として、下の画像を参照してください。

私はまた、以下のスニペットに私の現在のスライダーのコードを貼り付けます。小数点以下を得るために100によって

$(function() { 
 
    $("#slider-range").slider({ 
 
     range: true, 
 
     min: 40, 
 
     max: 400, 
 
     step: 10, 
 
     values: [ 100, 250 ], 
 
     slide: function(event, ui) { 
 

 
    if (ui.values[0] < 100){ 
 
     $("#amount").val(ui.values[ 0 ]+"K AED"); 
 
     $("#amount2").val(ui.values[ 1 ]+"M AED"); 
 

 
    } 
 

 
    if (ui.values[1] < 100){ 
 
     $("#amount").val(ui.values[ 0 ]+"K AED"); 
 
     $("#amount2").val(ui.values[ 1 ]+"K AED"); 
 

 
    } 
 

 
    if (ui.values[0] > 100){ 
 
     $("#amount").val(ui.values[ 0 ]+"M AED"); 
 
     $("#amount2").val(ui.values[ 1 ]+"M AED"); 
 
    } 
 
     
 

 
     } 
 
    }); 
 

 
    $("#amount").val($("#slider-range").slider("values", 0)+"K AED"); 
 
    $("#amount2").val($("#slider-range").slider("values", 1)+"M AED"); 
 
    });

input#amount, input#amount-mob, input#amount2, input#amount2-mob { 
 
    width: 90px; 
 
    font-weight: 600; 
 
    letter-spacing: 1px; 
 
} 
 

 
.ui-widget.ui-widget-content { 
 
    border: 1px solid #c5c5c5; 
 
    width: 290px; 
 
    margin-right: 10px; 
 
    margin-left: 0; 
 
    border-radius: 0px; 
 
    background-color: #D5D5D5; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 

 

 
<div class="price-range"> 
 
    <table> 
 
     <tr> 
 
     <td> 
 
     <input type="text" id="amount" readonly > 
 
     </td> 
 
     <td> 
 
     <div id="slider-range"></div> 
 
     </td> 
 
     <td> 
 
     <input type="text" id="amount2" readonly> 
 
     </td> 
 
     </tr> 
 
     </table> 
 
          
 
    </div>

Answer 1

Devide ui.values、

$("#amount").val((ui.values[ 0 ]/100)+"M AED"); 
$("#amount2").val((ui.values[ 1 ]/100)+"M AED"); 
$("#amount2").val($("#slider-range").slider("values", 1)/100+"M AED"); 

$(function() { 
 
    $("#slider-range").slider({ 
 
     range: true, 
 
     min: 40, 
 
     max: 400, 
 
     step: 10, 
 
     values: [ 100, 250 ], 
 
     slide: function(event, ui) { 
 
    if (ui.values[0] < 100){ 
 
     $("#amount").val(ui.values[ 0 ]+"K AED"); 
 
     $("#amount2").val((ui.values[ 1 ]/100)+"M AED"); 
 

 
    } 
 

 
    if (ui.values[1] < 100){ 
 
     $("#amount").val(ui.values[ 0 ]+"K AED"); 
 
     $("#amount2").val(ui.values[ 1 ]+"K AED"); 
 

 
    } 
 

 
    if (ui.values[0] > 100){ 
 
     $("#amount").val((ui.values[ 0 ]/100)+"M AED"); 
 
     $("#amount2").val((ui.values[ 1 ]/100)+"M AED"); 
 
    } 
 
     
 

 
     } 
 
    }); 
 

 
    $("#amount").val($("#slider-range").slider("values", 0)+"K AED"); 
 
    $("#amount2").val($("#slider-range").slider("values", 1)/100+"M AED"); 
 
     
 
    });

input#amount, input#amount-mob, input#amount2, input#amount2-mob { 
 
    width: 90px; 
 
    font-weight: 600; 
 
    letter-spacing: 1px; 
 
} 
 

 
.ui-widget.ui-widget-content { 
 
    border: 1px solid #c5c5c5; 
 
    width: 290px; 
 
    margin-right: 10px; 
 
    margin-left: 0; 
 
    border-radius: 0px; 
 
    background-color: #D5D5D5; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 

 

 
<div class="price-range"> 
 
    <table> 
 
     <tr> 
 
     <td> 
 
     <input type="text" id="amount" readonly > 
 
     </td> 
 
     <td> 
 
     <div id="slider-range"></div> 
 
     </td> 
 
     <td> 
 
     <input type="text" id="amount2" readonly> 
 
     </td> 
 
     </tr> 
 
     </table> 
 
          
 
    </div>