##
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.

Previous
Auto Binding Labels
Next
Range: min & max