Moving Tooltip Plugin

Range slider library has a standalone Moving Tooltip Plugin. The plugin adds a moving tooltip to each pointer. You can change the tooltip color, size, and distance to pointer.

Download the latest tcrs-moving-tooltip.min.js script from GitHub and add it to the HTML before the toolcool-range-slider.min.js script.

Check out the following basic example:

<tc-range-slider
  value1="20"
  value2="50"
  value3="80"
  round="0"

  moving-tooltip="true"
  moving-tooltip-distance-to-pointer="40"
  moving-tooltip-width="35"
  moving-tooltip-height="30"
  moving-tooltip-bg="#721d82"
  moving-tooltip-text-color="#efefef"
  moving-tooltip-units="%">
</tc-range-slider>

<!-- The plugin should be included before the core library. -->
<script src="tcrs-moving-tooltip.min.js"></script>
<script src="toolcool-range-slider.min.js"></script>

The moving-tooltip-distance-to-pointer attribute can also be negative:

<tc-range-slider
  value1="20"
  value2="50"
  value3="80"
  round="0"

  moving-tooltip="true"
  moving-tooltip-distance-to-pointer="-40"
  moving-tooltip-width="35"
  moving-tooltip-height="30"
  moving-tooltip-bg="#387ec7"
  moving-tooltip-text-color="#efefef"></tc-range-slider>

The plugin is also available on the jsDelivr CND:

<tc-range-slider
  value1="30"
  value2="50"
  value3="70"
  round="0"

  moving-tooltip="true"
  moving-tooltip-distance-to-pointer="40"
  moving-tooltip-width="35"
  moving-tooltip-height="30"
  moving-tooltip-bg="#721d82"
  moving-tooltip-text-color="#efefef"></tc-range-slider>

<!-- The plugin should be included before the core library. -->
<script 
  src="https://cdn.jsdelivr.net/npm/toolcool-range-slider/dist/plugins/tcrs-moving-tooltip.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/toolcool-range-slider/dist/toolcool-range-slider.min.js"></script>

In bundlers like Webpack and esbuild you can use it like this:

import 'toolcool-range-slider/dist/plugins/tcrs-moving-tooltip.min.js';
import 'toolcool-range-slider';

// any code here...

📌 You can add your own css customizations using CSS Links or using addCSS API.

The tooltip plugin settings can be changed using the API:

const $slider = document.getElementById('slider-1');
$slider.movingTooltip = true; // or false
$slider.distanceToPointer = 50; // px
$slider.tooltipWidth = 50; // px
$slider.tooltipHeight = 50; // px
$slider.tooltipBg = '#000';
$slider.tooltipTextColor = '#efefef';
$slider.tooltipUnits = '{% page-content %}#x27;;
$slider.tooltipUnitType = 'prefix';
$slider.formatTooltipValue = (value) => {
    return Number(value).toLocaleString('en-US', { minimumFractionDigits: 2 });
};

TypeScript example:

import { IMovingTooltipPlugin } from 'toolcool-range-slider';

const $slider = document.getElementById('slider-1') as IMovingTooltipPlugin;

$slider.movingTooltip = true; // or false
$slider.distanceToPointer = 50; // px
$slider.tooltipWidth = 50; // px
$slider.tooltipHeight = 50; // px
$slider.tooltipBg = '#000';
$slider.tooltipTextColor = '#efefef';
$slider.tooltipUnits = '{% page-content %}#x27;;
$slider.tooltipUnitType = 'prefix';
$slider.formatTooltipValue = (value?: (value: string|number|undefined) => string) => {
    return Number(value).toLocaleString('en-US', { minimumFractionDigits: 2 });
};

📌 An example page with the source code can be found here.