jQuery UI slider with decimal support

Question

I'm trying to get jQuery UI slider to work with decimals. Issue is slider is increasing the wrong way.

I want the slider to increase 0.3 -> 0.4 -> 0.5 -> 0.6 so on. but in below code it increase 0.3 -> 1.3 - > 2.3 -> 3.3 so on. How can i get this to increase the correct way

Here is my code

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

$(function() {
    $( "#slider-range" ).slider({
      range: true,
      min: 0.3,
      max: 5.03,
      values: [ 0.3, 5.30 ],
      slide: function( event, ui ) {
        $( "#amount" ).html( ui.values[ 0 ] + " - " + ui.values[ 1 ] );
        $( "#amount1" ).val(ui.values[ 0 ]);
        $( "#amount2" ).val(ui.values[ 1 ]);
      }

    });

    $( "#amount" ).html( $( "#slider-range" ).slider( "values", 0 ) + " - " + $( "#slider-range" ).slider( "values", 1 ) );

  });

Appreciate your time.

Answer 1

You have to pass step in config and specify the value by which it has to increment

$(function() {
    $( "#slider-range" ).slider({
      range: true,
      min: 0.3,
      max: 5.30,
      step: 0.1, // <-- new config
      values: [ 0.3, 5.30 ],
      slide: function( event, ui ) {
        $( "#amount" ).html( ui.values[ 0 ] + " - " + ui.values[ 1 ] );
        $( "#amount1" ).val(ui.values[ 0 ]);
        $( "#amount2" ).val(ui.values[ 1 ]);
      }

    });

    $( "#amount" ).html( $( "#slider-range" ).slider( "values", 0 ) + " - " + $( "#slider-range" ).slider( "values", 1 ) );

  });