Как получить десятичные приращения в слайдере Bootstrap на странице просмотра?

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

U, возможно, пропустил относительные файлы 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.