Search code examples
javascriptjqueryjquery-uijquery-pluginsrangeslider

Change JQuery Range Slider values in float after 100K

I want to change JQuery range slider values in float after 100K into 1.0M (Million).

In my scenario,

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

After moving the slider to 100K, I want to change 100K into 1.0M (1 million) and then it will be like 1.0M, 1.1M, 1.2M ... 4.0M .

Please see the below image as an example to understand what exactly I'm looking for.

enter image description here

I also paste my current slider code into the below snippet.

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

Solution

  • Devide ui.values by 100 to get the decimal, 

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