1

我想实现一个引导滑块，其中值增加 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 的新手。我提到了一些给我一些想法的链接，但我无法更进一步。我可能会遗漏一些东西。

4

1 回答 1

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>

这是一个工作小提琴供您参考。您可以查看Git中的引导滑块示例。

于 2018-01-16T18:35:09.367 回答