Bootstrap slider How can I move the tooltip value to external one?

Question

I'm using the Bootstrap slider plugin to create a Range Slider

in Example 2 I want to remove the tooltip option and move the value to external one.

Here my code:

HTML

<b class="min">$ 10</b> 
<input id="example2" type="text" data-slider-min="0" data-slider-max="2000" data-slider-step="1" data-slider-value="14" data-slider-tooltip="hide" /> 
<b class="max">$ 1000</b>

JavaScript

var slider = new Slider('#example2', {});

Answer 1

you can use slide event to get current value and embed the value where you want:

slider.on("slide", function(sliderValue) {
    //do stuff here
});

You can see here Snippet example:

 $(function() { var slider = new Slider('#example2', {}); slider.on("slide", function(sliderValue) { document.getElementById("value").textContent = sliderValue; }); })

 #value { color:red; font-weight:bold; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/11.0.2/css/bootstrap-slider.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/11.0.2/bootstrap-slider.min.js"></script> <b class="min">$ 10</b> <input id="example2" type="text" data-slider-min="10" data-slider-max="1000" data-slider-step="1" data-slider-value="14" data-slider-tooltip="hide" /> <b class="max">$ 1000</b> <br><br> value: <div id="value"></div>