在 100K 之后更改 JQuery 浮点范围滑块值

Question

我想将 100K 后浮动的 JQuery 范围滑块值更改为 1.0M（百万）。

在我的场景中，

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

将滑块移动到 100K 后，我想将 100K 更改为 1.0M（100 万），然后它会像 1.0M、1.1M、1.2M ... 4.0M。

请以下图为例，了解我到底在寻找什么。

我还将我当前的滑块代码粘贴到下面的代码片段中。

 $( 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

ui.values 除以 100 得到小数，

$( "#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>

在 100K 之后更改 JQuery 浮点范围滑块值

Change JQuery Range Slider values in float after 100K

javascript

jquery

jquery-ui

jquery-plugins

rangeslider