Storage Plugin

The range slider library also supports local and session storage using a standalone Storage Plugin. It’s used to save the selected slider value between different pages and page reloads.

Download the latest tcrs-storage.min.js script from GitHub and add it to the HTML before the toolcool-range-slider.min.js script. Then use the storage and storage-key attributes to enable the plugin.

Session storage example:

<tc-range-slider
  value1="30"
  value2="70"
  
  storage="session-storage" 
  storage-key="tc-range-slider-1"

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

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

Change the value of the slider and then reload the page to see the plugin in action:

The difference between local and session storage is that session storage keeps the value only during the current session, while the local storage keeps it until the user clears the browser cache.

Local storage example:

<tc-range-slider
  storage="local-storage"
  storage-key="tc-range-slider-2">
</tc-range-slider>

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

Storage properties can also be set programmatically:

const $slider = document.querySelector('#slider');
$slider.storage = 'local-storage'; // 'session-storage'
$slider.storageKey = 'storage-key';

The plugin is also available on the jsDelivr CND:

<tc-range-slider
  storage="local-storage"
  storage-key="tc-range-slider-2">
</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-storage.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-storage.min.js';
import 'toolcool-range-slider';

// any code here...

📌 An example page can be found here.