AutoBinding Labels

Range slider values can be automatically printed to HTML using Binding Labels Plugin.

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

Use the value-label attribute to specify the path to the label. The path can point to any HTML element.

<tc-range-slider value-label="#value-1"></tc-range-slider>
<div id="value-1"></div>

<!-- The plugin should be included before the core library. -->
<script src="tcrs-binding-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-label="#value-1"></tc-range-slider>
<div id="value-1"></div>

<!-- The plugin should be included before the core library. -->
<script 
  src="https://cdn.jsdelivr.net/npm/toolcool-range-slider/dist/plugins/tcrs-binding-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-binding-labels.min.js';
import 'toolcool-range-slider';

// any code here...

You can display labels for multiple points in the same way:

<tc-range-slider 
  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>

<div class="value-1"></div>
<div class="value-2"></div>
<div class="value-3"></div>
<div class="value-4"></div>

<script src="tcrs-binding-labels.min.js"></script>
<script src="toolcool-range-slider.min.js"></script>

value-label, value0-label, and value1-label are aliases of each other and refer to the first value.

Label paths can also be defined via the API as follows:

<tc-range-slider id="slider-2" value-label=".value-21"></tc-range-slider>

<div class="value-21"></div>
<div class="value-22"></div>

<script src="tcrs-binding-labels.min.js"></script>
<script src="toolcool-range-slider.min.js"></script>
<script>
  // get the reference
  const $slider = document.getElementById('slider-2');
  
  // change label path via API
  $slider.valueLabel = '.value-22';
  
  // or change it via attribute
  $slider.setAttribute('value-label', '.value-22');
</script>

TypeScript example:

const $slider2 = document.getElementById('slider-2') as RangeSlider;

($slider2 as IBindingLabelsPlugin).valueLabel = '.value-22';

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