Question

我想实现一个Bootstrap滑块，其值增加0.01。此外，我应该能够指定值的范围;例如，用户只能选择4到12之间的值，移动滑块会以0.01的增量增加值。

剃刀/ 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文件。

实施例

＆＃13;

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

＆＃13;

这是一个有效的fiddle供您参考。你可以看一下Git中的bootstrap滑块示例。

如何在View Page中的Bootstrap Slider中使用小数增量？

1 个答案:

实施例