Auto Generated Labels

Range slider min, max, and value labels can be automatically generated using Generated Labels Plugin. This plugin differs from Binding Labels Plugin in that it creates labels entirely by itself.

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

Use the generate-labels=“true” attribute to enable the plugin.

<tc-range-slider 
  value="50"
  generate-labels="true"
  generate-labels-text-color="#5e7593"
  generate-labels-units="%">
</tc-range-slider>

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

The plugin is also available on the jsDelivr CND:

<tc-range-slider
  value="50"
  generate-labels="true"
  generate-labels-text-color="#5e7593"
  generate-labels-units="%">
</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-generated-labels.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-generated-labels.min.js';
import 'toolcool-range-slider';

// any code here...

You can display labels for multiple points in the same way:

<tc-range-slider
  generate-labels="true"
  
  value1="10"
  value2="20"
  value3="80"
  value4="90"
  
  value1-label=".value-1"
  value2-label=".value-1"
  value3-label=".value-1"
  value4-label=".value-1">
</tc-range-slider>

<script src="tcrs-generated-labels.min.js"></script>
<script src="toolcool-range-slider.min.js"></script>

It is also possible to enable or disable generated labels programmatically:

<script>
    // get the reference
    const $slider = document.getElementById('slider-1');
    
    // change the setting
    $slider.generateLabels = true; // or false
    $slider.generateLabelsUnits = '%';
    $slider.generateLabelsTextColor = '#545454';

    // or 
    // $slider.setAttribute('generate-labels', 'true');
    // $slider.setAttribute('generate-labels-units', '%');
    // $slider.setAttribute('generate-labels-text-color', '#545454);
</script>

TypeScript version:

<script>
    // get the reference
    const $slider = document.getElementById('slider-1') as IGeneratedLabelsPlugin;
    
    // change the setting
    $slider.generateLabels = true; // or false
    $slider.generateLabelsUnits = '%';
    $slider.generateLabelsTextColor = '#545454';
</script>

📌 An example page can be found here.

Custom Formatting

It’s possible to define a custom formatting function to change the value of a label:

<tc-range-slider
        id="slider"
        value1="30"
        value2="70"
        generate-labels="true"
        generate-labels-text-color="#5e7593"></tc-range-slider>

<script>
    // get the reference to the slider element
    const $slider = document.getElementById('slider');
    
    // set the formatting function - generateLabelsFormat
    $slider.generateLabelsFormat = (value) => {
        
        // Any custom code here.
        // The function should return string.
        if(value === undefined) return '';
        return `$${ Number(value).toFixed(2) }`;
    };
</script>

The TypeScript definition of the generateLabelsFormat function is:

generateLabelsFormat: (value: string | number | undefined) => string;

📌 An example page can be found here.