Geek Answers Handbook

Format tooltip in bootstrap slider

I am using the Bootstrap Slider control . I configure my slider as follows:

<input id="percentSlider" data-slider-id="percentSlider" type="text" data-slider-min="0" data-slider-max="100" data-slider-step="0.1" value="0" />
<input id="percent" class="form-control" type="text" autocomplete="off"  />

...

var p = 0;
var percentSlider = $('#percentSlider')
  .slider({
    formatter: function (value) {
      return value.toFixed(1) + '%';
    },
    value: p,
    precision: 1
  })
  .on('slide', function (s) {
    $('#percent').val(s.value.toFixed(1));
  })
;

$('#percent').val(p);

This slider "works", with the exception of one part: a tooltip. As the user slides, I need a tooltip to format with a single precision. In other words, I need a hint to show 10.0 → 10.1 → 10.2, etc. Currently, when the user slides, I can see a value like "55.300000000004". I would also like to include a percentage in the tooltip, so it shows something like "10.0%" or "10.1%". However, I need one precision value in the tooltip, and I have nothing to do.

- , ?

!

+4
3

:

var percentSlider = $('#percentSlider').slider();
var sliderTooltip = $('#percentSlider .tooltip .tooltip-inner');
//function to change the tooltip value to required format
var _changeTooltipFormat = function(){
	sliderTooltip.text(sliderTooltip.text()+'%');
}
//change tooltip format on initial load
_changeTooltipFormat();

//on slide event 
percentSlider.on('slide', function () {
   $('#percent').attr('value',percentSlider.data('slider').getValue());
   //change tooltip value format 
   _changeTooltipFormat();  
});
Hide result
+5

/ . . ,

var formattedTooltipVal bootstrap-slider.js

var. $, .

formattedTooltipVal = '$' + this.options.formatter(this._state.value).replace(": ", ": $");
0

, bootstrap-slider.js,

if (this.range) {
            this.tooltipInner.text(
                this.formater(this.value[0]) +
                ' : ' +
                this.formater(this.value[1])
            );
            this.tooltip[0].style[this.stylePos] = this.size * (this.percentage[0] + (this.percentage[1] - this.percentage[0])/2)/100 - (this.orientation === 'vertical' ? this.tooltip.outerHeight()/2 : this.tooltip.outerWidth()/2) +'px';
        } else {
            this.tooltipInner.text(
                this.formater(this.value[0])
            );
            this.tooltip[0].style[this.stylePos] = this.size * this.percentage[0]/100 - (this.orientation === 'vertical' ? this.tooltip.outerHeight()/2 : this.tooltip.outerWidth()/2) +'px';
        }
    },

, % ,

if (this.range) {
                this.tooltipInner.text(
                    this.formater(this.value[0] + ' %') +
                    ' : ' +
                    this.formater(this.value[1] + ' %')
                );
0

More articles:


All Articles