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.