##
Origin at Center Plugin

The library also has an Origin at Center Plugin. This plugin makes the origin of the pointer always in the center.

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

Use the origin-at-center=“true” attribute to enable the plugin.

    <tc-range-slider
      value="60"
      origin-at-center="true"
      generate-labels="true">
    </tc-range-slider>

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

The plugin is also available on the jsDelivr CND:

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

The plugin has an API:

    const $slider = document.getElementById('slider-1');
    $slider.originCenterEnabled = true; // or false

TypeScript example:

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

    const $slider = document.getElementById('slider-1') as IOriginCenterPlugin;
    $slider.originCenterEnabled = true; // or false

> 📌 An example page can be found here.

Previous
Soft Limits
Next
Events