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

HTML Property | Default Value | API Property
--- | --- | ---
marks | true | marksEnabled
marks-count | 11 | marksCount
marks-values-count | 11 | marksValuesCount
marks-color | #cbd5e1 | marksColor
marks-values-color | #475569 | markValuesColor

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

Previous
Moving Tooltip Plugin
Next
Width, Height, & Border Radius