Formatting Number within Tooltip using the Bootstrap-slider plugin

Question

I can not seem to figure out a way where i can change the number within the tooltip while using the bootstrap-slider plugin.

.slider .tooltip.top {
  margin-top: -45px !important;
  margin-left: 2px;
}

.slider .tooltip-inner {
  white-space: nowrap;
  border-radius: 0px;
}

.slider .tooltip.top .tooltip-arrow {
  border-top-color: #198294 !important;
}

<div class="container">
  <div class="row">
    <div class="col-md-6" style="margin-top: 75px;">
      <div class="slider-wrapper slider-primary slider-strips slider-ghost">
        <input class="input-range" type="text" data-slider-step="1" data-slider-value="14, 75" data-slider-min="0" data-slider-max="100" data-slider-range="true" data-slider-tooltip_split="true" data-slider-tooltip="hide" />
      </div>
    </div>
  </div>
</div>

1000 in the tooltip, should be 1,000 1000023 in the tooltip, should be 1,000,023

score 4 · Accepted Answer · answered Jul 31 '19 at 18:21

You can use toLocaleString() and formatter callback:

$(':text').slider({
    formatter: function(value) {
        return 'Current value: ' + value.toLocaleString('en-US', { style: 'decimal', useGrouping: true });
    }
});

.slider .tooltip.top {
    margin-top: -45px !important;
    margin-left: 2px;
}

.slider .tooltip-inner {
    white-space: nowrap;
    background-color: white;
    color: #747679;
    font-family: TT Norms;
    border: 1px solid #198294;
    border-radius: 0px;
}

.slider .tooltip.top .tooltip-arrow {
    border-top-color: #198294 !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.6.2/css/bootstrap-slider.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.6.2/bootstrap-slider.min.js"></script>


<div class="container">
    <div class="row">
        <div class="col-md-6" style="margin-top: 75px;">
            <div class="slider-wrapper slider-primary slider-strips slider-ghost">
                <input class="input-range" type="text" data-slider-step="1" data-slider-value="3023" data-slider-min="0"
                       data-slider-max="1000023" data-slider-range="true" data-slider-tooltip-split="true" data-slider-tooltip="show" />
            </div>
        </div>
    </div>
</div>

Formatting Number within Tooltip using the Bootstrap-slider plugin

1 Answers1