带有小数支持的jQuery UI滑块

Question

我正在尝试使用jQuery UI滑块来处理小数.问题是滑块增加了错误的方式.

我希望滑块增加0.3 - > 0.4 - > 0.5 - > 0.6等等.但是在下面的代码中它会增加0.3 - > 1.3 - > 2.3 - > 3.3等等.我怎样才能让它增加正确的方法

这是我的代码

<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 ) );

  });

感谢你的时间.

Answer 1

您必须在config中传递步骤并指定它必须增加的值

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

  });