Marks Plugin

Range slider library has a standalone Marks Plugin. This allows to generate points along the slider.

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

And then add the marks=“true” attribute to see it in action. Check out the following basic example:

<tc-range-slider
  marks="true"
  marks-count="11"
  marks-values-count="31"

  value1="30"
  value2="70"
  step="3.33"

  round="0"
  generate-labels="true">
</tc-range-slider>

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

The plugin is also available on the jsDelivr CND:

<tc-range-slider
  value1="20"
  value2="50"
  value3="80"
  
  marks="true"
  marks-step="5">
</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-marks.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-marks.min.js';
import 'toolcool-range-slider';

// any code here...

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

Example with different min/max:

<tc-range-slider
  marks="true"
  marks-count="11"
  marks-values-count="11"

  min="-100"
  max="100"

  value="0"
  step="20"

  round="0"
  generate-labels="true">
</tc-range-slider>

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

const $slider = document.getElementById('slider-1');
$slider.marksEnabled = true; // or false
$slider.marksCount = 11;
$slider.marksValuesCount = 11;
$slider.marksColor = '#ff0000';
$slider.markValuesColor = '#111';

TypeScript example:

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

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

$slider.marksEnabled = true; // or false
$slider.marksCount = 11;
$slider.marksValuesCount = 11;
$slider.marksColor = '#ff0000';
$slider.markValuesColor = '#111';

More examples:

<tc-range-slider
  marks="true"
  marks-count="9"
  marks-values-count="9"
  marks-color="#d7c114"
  marks-values-color="#8240bb"
  
  value="50"
  step="12.5"
  
  slider-width="400px"
  generate-labels="true">
</tc-range-slider>

<tc-range-slider
  marks="true"
  marks-count="21"
  marks-values-count="11"
  value="50"
  step="5"
  round="0"
  slider-width="400px"
  generate-labels="true">
</tc-range-slider>

<tc-range-slider
  marks="true"
  marks-count="31"
  marks-values-count="11"
  value="50"
  step="3.33"
  round="0"
  slider-width="400px"
  generate-labels="true">
</tc-range-slider>

Right to left example:

<tc-range-slider
  marks="true"
  marks-count="11"
  marks-values-count="11"
  value="50"
  step="10"
  rtl="true"
  round="0"
  slider-width="400px"
  generate-labels="true">
</tc-range-slider>

ABC example:

<tc-range-slider
  data="a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r, s, t, u, v, w, x, y, z"
  marks="true"
  marks-count="26"
  marks-values-count="25"
  value="d"
  slider-width="400px"
  generate-labels="true">
</tc-range-slider>

<tc-range-slider
  data="a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r, s, t, u, v, w, x, y, z"
  marks="true"
  marks-count="26"
  marks-values-count="5"
  step="1"
  value="d"
  slider-width="400px"
  generate-labels="true">
</tc-range-slider>

<tc-range-slider
  marks="true"
  marks-count="11"
  marks-values-count="11"
  value="50"
  step="10"
  round="0"
  type="vertical"
  generate-labels="true">
</tc-range-slider>

Bottom to top:

<tc-range-slider
  marks="true"
  marks-count="11"
  marks-values-count="11"
  value="50"
  step="10"
  btt="true"
  round="0"
  type="vertical"
  generate-labels="true">
</tc-range-slider>

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