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

I want to implement a Bootstrap slider where the values increment by 0.01. Also, I should be able to specify the range of values; for example, the user can only select values between 4 and 12, and moving the slider increases the values in the increments of 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>

Output I am not seeing any slider in the output. I am simply getting a textbox where I am able to enter text.

I am new to Bootstrap. I referred to some links that gave me some idea, but I wasn't able to go further. I might be missing something.

Solution

U might have missed out relative js files.

Example

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

here is a working fiddle for your reference. u can have a look at bootstrap slider examples in Git.