如何在视图页面的 Bootstrap 滑块中有小数增量？

Question

我想实现一个 Bootstrap 滑块，其中的值递增 0.01。另外，我应该能够指定值的范围；例如，用户只能 select 4 到 12 之间的值，并且移动滑块会以 0.01 的增量增加值。

Razor/HTML

<input id="inputRateOfInterest" type="text" />

jQuery

<script src="~/lib/jquery/dist/jquery.js"></script>
<script type="text/javascript">
    $("#inputRateOfInterest").scroll({
        precision: 2,
        value: 8.10
    });
</script>

输出我在输出中没有看到任何滑块。我只是得到一个文本框，我可以在其中输入文本。

我是 Bootstrap 的新手。我提到了一些给了我一些想法的链接，但我无法走得更远。我可能会遗漏一些东西。

Answer 1

你可能遗漏了相关的js文件。

例子

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script type="text/javascript" src='https://rawgit.com/seiyria/bootstrap-slider/master/dist/bootstrap-slider.js'></script>
<link rel="stylesheet" type="text/css" href="https://rawgit.com/seiyria/bootstrap-slider/master/dist/css/bootstrap-slider.css">
<link rel="stylesheet" type="text/css" href="http://seiyria.com/bootstrap-slider/css/bootstrap.min.css">

<h3>Bootstrap Slider Example</h3>
<p>
<input type="text" onchange="RGBChange()" class="span2" value="" data-slider-min="4" data-slider-max="12" data-slider-step="0.01" data-slider-value="5" data-slider-id="GC" id="G" data-slider-tooltip="hide" data-slider-handle="round" />
</p>

<input id="val" type="text"></input>

<script>
var RGBChange = function() {
 $("#val").val(g.getValue());
};

var g = $('#G').slider()
  .on('slide', RGBChange)
  .data('slider');
</script>

这里有一份有效的 fiddle 供您参考。您可以查看 Git.

中的 bootstrap 滑块示例

如何在视图页面的 Bootstrap 滑块中有小数增量？

How to have decimal increments in Bootstrap Slider in View Page?

jquery

razor

bootstrap-slider

例子